簡體   English   中英

Chrome擴展程序Onclick()和彈出窗口

[英]Chrome Extension Onclick() with Popup

我想清除我的通知(徽章)。 單擊圖標時,應同時打開一個彈出窗口,但它不起作用。

它與選項卡一起工作,但我不想在選項卡上顯示它應該在彈出窗口中。

這是代碼;

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);

由於Background Page在卸載或禁用擴展程序之前一直存在,因此您的徽標文本正在增長。

所以你的代碼

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

保持徽章繼續增長。

此外, chrome.browserAction.onClicked.addListener(updateIcon); 第二次將無法正常工作

您想停止什么?

PS:您正在使用兩個相互沖突的功能( browserAction.onClickedbrowserAction.setPopup一起使用。

編輯1

工作版本

的manifest.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"
    }
}

background.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);

popup.html

一些瑣碎的Page,使用popup.js來遵守CSP。

<html>

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

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

</html>

popup.js

調用了“背景頁面”功能,因此單擊圖標時計數器開始計數

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM