Question

我不知道该怎么做，而且文档似乎没有让这很明显。

我尝试制作background_page并将chrome.pageAction.show(tab.id);放入其中，但这似乎不起作用。

我不想使用browser_action图标，因为该图标仅反映插件的状态，但它不是执行任何操作的按钮。

如何在任何页面/标签的地址栏中添加page_action的图标？

编辑：这是我的manifest.json：

{
    "name": "My Very First Extension :D",
    "version": "0.0.1",
    "description": "Awesomeness",
    "background_page": "background.html",

    "page_action": {
        "default_icon": "icon.png"
    },

    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["mmm.js"]
    }]
}

其中icon.png是19x19像素的PNG图形。这是background.html源代码，我正在尝试为所有选项卡显示page_action图标：

<!DOCTYPE html>
<html>
    <head>
        <script>
            chrome.pageAction.show(tab.id);
        </script>
    </head>
</html>

Answer 1

我发现您的代码存在两个问题。

您不能在后台页面中使用内联脚本块 - js代码只能从链接脚本运行（如：<script type="text/javascript" src="background.js"></script>）。这是因为Content Security Policy。
正如亚伯拉罕的回答所述，由于您希望所有页面都显示图标，因此您应该使用browser_action，而不是page_action。根据{{3}}：

不要将页面操作用于对大多数页面有意义的功能。改为使用浏览器操作。

页面操作的图标显示在omnibar（Chrome的地址栏）中，而浏览器操作的图标显示为omnibar旁边的工具栏按钮。可以用来反映插件的状态和操作按钮。

解决方案

要显示图标，您必须致电：chrome.pageAction.show(tabId)。但是，您不能只从内容脚本中调用它，因为必须通过tabId传递chrome.pageAction.show（），并从chrome.tabs和Google's pageAction documentation page检索tabId。

要添加浏览器操作按钮并在单击时定义其行为，请在manifest.json文件中定义browser_action元素...

"browser_action": {
   "default_title": "action description",
   "default_icon": "icon.png"
}

...并将此代码放在后台脚本中：

// Define behavior when browser action icon is clicked
chrome.browserAction.onClicked.addListener(function(tab) {
   // executed when the user clicks on the browser action icon
});

或，如果您想违反惯例并使用pageAction，您可以使用问题中的manifest.json代码并将以下内容放入后台脚本中：

// Show page action icon in omnibar.
function showPageAction( tabId, changeInfo, tab ) {
    chrome.pageAction.show(tabId);
};
// Call the above function when the url of a tab changes.
chrome.tabs.onUpdated.addListener(showPageAction);

如需进一步研究，请查看部分chrome.tabs is not accessible from content scripts的源代码。

Answer 2

如果您希望内容脚本显示页面操作图标，则他（内容脚本）无法执行此操作，但是，他可以向background.js发送消息（背景。允许js显示页面操作图标）

内容脚本（例如foo.js）：

   chrome.runtime.sendMessage({action: "showIcon"}, function(response) {});

background.js：

   // Received a message from content script
   chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {               
       if (request.action == "showIcon") {
          chrome.pageAction.show(sender.tab.id);
       }
   });

Answer 3

使用browser_action图标。 page_action和browser_action相同并提供相同的功能，但只能为特定页面启用page_action。如果您不希望browser_action像按钮一样行动，而不是让它做任何事情。

如何在地址栏中为Chrome扩展程序添加图标？

3 个答案:

我发现您的代码存在两个问题。

解决方案