如何让 Chrome Extension PageAction 图标出现在地址栏中？答案

【问题标题】：How do I get a Chrome Extension PageAction icon to appear in the address bar?如何让 Chrome Extension PageAction 图标出现在地址栏中？
【发布时间】：2011-01-12 21:13:55
【问题描述】：

我正在尝试构建一个在地址栏中显示为图标的 Chrome 扩展程序，单击该扩展程序时，会在页面上的所有元素上设置 contenteditable=true，然后再次单击时将它们设置回 contenteditable=false。

但是，我遇到了第一个障碍...该图标甚至没有出现在地址栏中。

这是我的清单文件：

 {
  "name": "Caret",
  "version": "1.0",
  "description": "Allows you to edit the content on any webpage",
  "page_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["jquery.js", "caret.js"]
    }
  ],
  "permissions" : [
    "tabs"
  ]
}

这是 caret.js 脚本：

    chrome.browserAction.onClicked.addListener(function(Tab) {

    $("*").attr("contenteditable",true);

});

这是我第一次尝试扩展，所以很可能是新手的错误，但我非常感谢任何帮助或建议！

【问题讨论】：

由于 Chrome 的变化，这不再可能。 ropstah 的答案应该被标记为正确。

标签： google-chrome google-chrome-extension

【解决方案1】：

好的，原来我需要使用chrome.pageAction.show(tab.id);，这意味着我需要获取当前选项卡的ID，这是通过以下方式实现的：

chrome.tabs.getSelected(null, function(tab) {

    chrome.pageAction.show(tab.id);


});

但是事实证明你不能在内容脚本中使用 chrome.tabs，所以我不得不改用背景页面。

【讨论】：

例如，您可以将此 JSON 添加到清单文件中。 "background": { "scripts": ["my_background_script.js"] } 然后将显示页面图标的 JavaScript 放在 my_background_script.js 中。
@Chris Armstrong 我无法获得页面操作图标，即使遵循了这个答案：(

【解决方案2】：

从上一个版本开始，这不再可能。

Chrome extension page action appearing outside of address bar

https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ

【讨论】：

【解决方案3】：

My answer to this other question 给出了解决方案。仅供参考，该答案中提到的第二个代码问题也与您的代码有关：您希望该图标出现在所有页面上，因此您应该使用 browser_action，而不是 page_action。两者都可以，但在每个页面上使用页面操作违反惯例，并导致最终用户体验不太一致。

【讨论】：

【解决方案4】：

我遇到了类似的问题，以下是我解决的步骤：

我更改了我的 manifest.json 以包含以下内容：

{
  "background": {  
    "scripts": ["background.js"],  
    "persistent":false  
  },  
  "page_action": {  
    "default_icon": "logo.png",  
    "default_title": "onhover title",  
    "default_popup": "popup.html"  
  }   
}

然后我将以下代码插入到我的后台脚本中：

// When the extension is installed or upgraded ...
    chrome.runtime.onInstalled.addListener(function() {
      // Replace all rules ...
      chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        // With a new rule ...
        chrome.declarativeContent.onPageChanged.addRules([
          {
            // That fires when on website and has class
            conditions: [
              new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
                css: [".cssClass"]
              })
            ],
            // And shows the extension's page action.
            actions: [ new chrome.declarativeContent.ShowPageAction() ]
          }
        ]);
      });
    });

可以在此处找到相关文档...https://developer.chrome.com/extensions/declarativeContent

【讨论】：

【解决方案5】：

我这样做了：

chrome.tabs.onUpdated.addListener(function(id, info, tab){
  if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
    chrome.pageAction.show(tab.id);
  }
});

【讨论】：