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

Question

I'm making a simple chrome extension that can check HTML tags for the current active tab.我正在制作一个简单的 chrome 扩展程序，可以检查当前活动选项卡的 HTML 标签。

When extension icon is clicked, it shows default popup page(popup.html)单击扩展图标时，它会显示default popup page(popup.html)

It will change the extension icon depending on results and shows the results on the popup page.它将根据结果更改扩展图标，并在弹出页面上显示结果。

I'm using chrome.browserAction.setIcon({path: imgSrc}) code to change the icon of extension.我正在使用chrome.browserAction.setIcon({path: imgSrc})代码来更改扩展图标。

But that problem is that, this code change extension icon on all of another tab.但问题是，此代码更改了所有另一个选项卡上的扩展图标。

I wanna change it on only the currently active tab that was clicked extension icon.我只想在单击扩展图标的当前活动选项卡上更改它。

I know that I should get the current tab id to change the ext icon for the currently active tab.我知道我应该获取当前选项卡 ID 来更改当前活动选项卡的分机图标。

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

But no idea how to get current active tab id on popup.js , not background.js但是不知道如何在popup.js而不是background.js上获取当前活动的选项卡 ID

Can somebody help me?有人可以帮我吗？

here are my files这是我的文件

manifest.json that declares default_popup声明default_popup的manifest.json

{
    "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弹出窗口.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弹窗.js

chrome.tabs.executeScript({file: '/js/injection.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';
})();

Answer 1

Content scripts can't do it.内容脚本做不到。
Move the two lines (imgSrc and setIcon) to popup.js and specify tabId .将这两行（imgSrc 和 setIcon）移动到 popup.js 并指定 tabId 。

popup.js: popup.js:

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-01-21 09:30:19

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-01-21 09:30:19

解决方案1
2 已采纳 2020-01-21 09:30:19