javascript - DeclarativeContent - 等待显示页面操作

Question

我是 Chrome 扩展程序的新手，但我正在尝试弄清楚如何延迟显示页面操作图标，直到我准备好为止。

我有一个内容脚本(它等待执行，直到 DOM 准备好)，所做的就是从页面获取 URL。

chrome.runtime.sendMessage({"url": getUrl()});

function getUrl() {
  var url = $('meta[itemprop=contentURL]').attr('content');
  return url;
}

在我的background.js 页面中，我使用declarativeContent 来查看是否应显示页面操作。这与 Google 的示例非常相似(即使不完全相同)。

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


var rule1 = {
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
        pageUrl: { urlContains: 'www.example.com', schemes: ['http', 'https'] }
    })
  ],
  actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

我设置了一个监听器来获取从 content_script 发送的消息

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    url =request.url; //set global variable in background.js so I have it
    sendResponse({});
});

最后，我在单击页面操作时执行了操作。

chrome.pageAction.onClicked.addListener(function(tab) {
  alert(url);
});

这段代码有效。但是，如果我在页面加载期间过早按下 page_action 按钮，我会收到 undefined 警报，因为页面操作在执行内容脚本和传递消息之前显示/可用。

如何延迟显示页面操作图标，直到执行内容脚本并设置 URL？

谢谢!

Answer 1

您不必使用内容脚本来获取选项卡的 URL。只需使用 tab.url (其中 tab 是 chrome.pageAction.onClicked 事件接收的第一个参数)即可获取页面的 URL:

chrome.pageAction.onClicked.addListener(function(tab) {
  alert(tab.url);
});

如果页面操作 ico 的实用性确实取决于只能在内容脚本中获取的页面状态，则不要使用 chrome.declarativeContent API，但调用chrome.pageAction.show(sender.tab.id);相反:

var url;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    url = request.url; // Save some state
    chrome.pageAction.show(sender.tab.id);
});