时间戳

首页 > 解决方案 > 如何更改仅带有弹出窗口的活动选项卡的 Chrome 扩展程序图标？

javascript - 如何更改仅带有弹出窗口的活动选项卡的 Chrome 扩展程序图标？

问题描述

我正在制作一个简单的 chrome 扩展，可以检查当前活动选项卡的 HTML 标签。

单击扩展图标时，它会显示default popup page(popup.html)

它将根据结果更改扩展图标并在弹出页面上显示结果。

我正在使用chrome.browserAction.setIcon({path: imgSrc})代码来更改扩展程序的图标。

但问题是，此代码更改所有另一个选项卡上的扩展图标。

我只想在单击扩展图标的当前活动选项卡上更改它。

我知道我应该获取当前选项卡 ID 来更改当前活动选项卡的 ext 图标。

对于此代码chrome.browserAction.setIcon({tabId: tab.id, path: imgSrc})

但不知道如何获取当前活动的标签 ID popup.js，不是background.js

有人可以帮助我吗？


这是我的文件

manifest.json声明default_popup

{
    "name": "Tag Checker for ChromeExtension",
    "version": "1.0.0",
    "description": "Tag Checker for ChromeExtension",
    "manifest_version": 2,
    "permissions": [
        "activeTab",
        "storage"
    ],
    "browser_action": {
        "default_icon": {
            "16": "images/browserAction/best.png",
            "32": "images/browserAction/normal.png",
            "48": "images/browserAction/bad.png",
            "128": "images/browserAction/abnormal.png"
        },
        "default_popup": "popup.html"
    }
}



popup.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Tag Checker</title>
    <script src="/js/popup.js"></script>
</head>
<body>
    <span id="results"></span>
</body>
</html>



popup.js

chrome.tabs.executeScript({file: '/js/injection.js'});



注入.js

//checking tag codes will be implemented here

var imgSrc = 'images/browserAction/48.png';
chrome.browserAction.setIcon({path: imgSrc});

(function() {
  document.querySelector('#results').innerText = 'DONE';
})();

标签： javascriptgoogle-chrome-extension

解决方案

内容脚本无法做到这一点。
将两行（imgSrc 和 setIcon）移动到 popup.js 并指定 tabId。

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  chrome.browserAction.setIcon({tabId: tab.id, path: 'images/browserAction/48.png'});
});

推荐阅读