Question

我正在尝试为Pinterest制作镀铬扩展程序。

我按照我在Chrome扩展程序sample中找到的示例（当在网址中有'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]);
  });
});

在这种情况下，你不需要＆＃34;沉重的＆＃34; "tabs"等权限或主机权限。你的清单只需要

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

让这个工作。

使用页面操作在某些页面上显示chrome扩展程序

1 个答案: