Question

我正在尝试构建一个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);

});

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

Answer 1

好的，事实证明我需要使用chrome.pageAction.show(tab.id);，这意味着我需要获取当前标签的ID，这是通过以下方式实现的：

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

    chrome.pageAction.show(tab.id);


});

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

Answer 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

Answer 3

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

Answer 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

Answer 5

我这样做了：

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

如何在地址栏中显示Chrome扩展程序PageAction图标？

5 个答案: