使用页面操作在特定页面上显示 chrome 个扩展程序

Question

我正在尝试为 Pinterest 创建 chrome 扩展。

我遵循了从 Chrome 扩展 sample 中找到的示例（当 url 中有 'g' 时多功能框中显示图标的示例）并稍微更改了文件，使其在站点中包含 "pinterest.com" 时显示图标。这是代码：

manifest.json:

"permissions": [
    "tabs", 
    "http://*.pinterest.com/"
]

background.js，我从网上的例子中复制了大部分代码：

function showPinterestAction(tabId, ChangeInfo, tab) {
  if(tab.url.indexOf('pinterest.com') > -1){
    chrome.pageAction.show(tabId);
  }
  /* This doesn't work. tab.url return undefine to me :( */
};

chrome.tabs.onUpdated.addListener(function(tabId, change, tab) {
  if (change.status == "complete") {
    showPinterestAction(tabId);
  }
});

chrome.tabs.onActivated.addListener(function(tabId, info) {
  selectedId = tabId;
  showPinterestAction(tabId);
});

// Ensure the current selected tab is set up.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  alert(tabs[0].id);
  showPinterestAction(tabs[0].id);
});

右侧页面不显示图标。如果我尝试 alert(tab.url)，它会给我 undefined。有人可以告诉我我的代码有什么问题吗？

Answer 1

嗯，你只用一个参数调用 showPinterestAction，tabId。

因此，tab 参数完全未定义也就不足为奇了。 showPinterestAction 的签名在 tab update callback 之后，但您没有像使用它那样使用它。

可以修改showPinterestAction为pull the data需要：

function showPinterestAction(tabId) {
  chrome.tabs.get(tabId, function(tab){
    if(tab.url.indexOf('pinterest.com') > -1){
      chrome.pageAction.show(tabId);
    }
  });
};

您可能还想让您的匹配模式更通用："*://*.pinterest.com/*" 应该涵盖您的用例。

或者，您可以使用 declarativeContent API，而不是锁定多个 tabs 事件 - 它是为此创建的。

var rule = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostSuffix: 'pinterest.com' }
    })
  ],
  actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

chrome.runtime.onInstalled.addListener(function(details) {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([rule]);
  });
});

在这种情况下，您将不需要 "heavy" 权限，例如 "tabs" 或主机权限。您的清单只需要

"permissions": [
   "declarativeContent", 
   "activeTab"
]

为了这个工作。

使用页面操作在特定页面上显示 chrome 个扩展程序

Have chrome extension display on certain page using page action

javascript

google-chrome

google-chrome-extension