带弹出窗口的 Chrome 扩展 Onclick()

Question

带弹出窗口的 Chrome 扩展 Onclick()

Mur*_*han 5 javascript popup onclick badge google-chrome-extension

我想清理我的通知（徽章）。当单击该图标时，应该同时打开一个弹出窗口，但它不起作用。

它适用于选项卡，但我不想在选项卡上显示它应该在弹出窗口上。

这是代码；

var i = 1;

function updateIcon() {
    i=1;
    chrome.browserAction.setBadgeText({text: ''});  
    chrome.browserAction.setPopup({popup:"popup.html"});
}

chrome.browserAction.onClicked.addListener(updateIcon);
chrome.browserAction.setBadgeBackgroundColor({color:[200, 0, 0, 100]});

window.setInterval(function() {
  chrome.browserAction.setBadgeText({text:String(i)});
  i++;
}, 4000);

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sud*_*han 1

您的徽章文本会不断增长，因为Background Page它会一直存在，直到卸载或禁用扩展为止。

所以你的代码

window.setInterval(function() {
  chrome.browserAction.setBadgeText({text:String(i)});
  i++;
}, 4000);

Run Code Online (Sandbox Code Playgroud)

保持徽章继续增长。

而且，chrome.browserAction.onClicked.addListener(updateIcon); 不会第二次！

你想阻止什么？

PS：您正在使用两个相互冲突的功能（browserAction.onClicked和browserAction.setPopup 一起使用。

编辑1

工作版本

清单.json

注册后台页面和浏览器操作

{
    "name": "Bagde",
    "description": "http://stackoverflow.com/questions/14436053/chrome-extension-onclick-with-popup",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "browser_action": {
        "default_title": "Hi",
        "default_popup": "popup.html"
    }
}

Run Code Online (Sandbox Code Playgroud)

背景.js

使用您的代码并消除了冲突的browserAction.onClicked事件

var i = 1;

function updateIcon() {
    i = 1;
    chrome.browserAction.setBadgeText({
        text: ''
    });
    chrome.browserAction.setPopup({
        popup: "popup.html"
    });
}


chrome.browserAction.setBadgeBackgroundColor({
    color: [200, 0, 0, 100]
});

window.setInterval(function () {
    chrome.browserAction.setBadgeText({
        text: String(i)
    });
    i++;
}, 4000);

Run Code Online (Sandbox Code Playgroud)

弹出窗口.html

一些琐碎的Page，用来popup.js遵守CSP。

<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body>
        <p>Some Content ..</p>
    </body>

</html>

Run Code Online (Sandbox Code Playgroud)

弹出窗口.js

调用后台页面功能，因此单击图标时计数器就会启动

document.addEventListener("DOMContentLoaded", function () {
    //Get Reference to Functions
    backGround = chrome.extension.getBackgroundPage();
    //Call Function
    backGround.updateIcon();
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	7673 次
最近记录：	12 年，10 月前