如何从 Chrome 扩展程序触发特定网站上的功能？

Question

最近开始使用 Chrome 扩展。我想弄清楚如何仅在特定网站上执行功能。

例如，我只想在 Stack Overflow 上显示一个警报框。我正在使用 Chrome 的声明性内容 API 来匹配主机。

我还没有找到类似的问题。

我的manifest.json 文件正在后台运行以下代码块。

'use strict';

chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [
            new chrome.declarativeContent.PageStateMatcher({
                pageUrl: {
                    hostEquals: 'stackoverflow.com'
                }
            })
        ],
        actions: [new chrome.declarativeContent.SOOnlyFunction()]
    }]);
});
});

function SOOnlyFunction()
{
    alert('On SO');
}

Answer 1

您可以使用 Chrome API 来实现此行为：

1. 当新页面加载时，您可以调用

   chrome.tabs.on更新

   在这里你可以过滤url

2. 和创建通知。

   chrome.notifications.create

在清单中添加这些对象：

"permissions": [  "activeTab","tabs","notifications" ],
"background": {
    "scripts": ["background.js"],
    "persistent": false
}

这是我的background.js 的样子。

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  if(changeInfo.url != null){

     console.log("onUpdated." + " url is "+changeInfo.url);
     // creates Notification.
    showNotification();

  }

});

function showNotification() {

    chrome.notifications.create( {
      iconUrl: chrome.runtime.getURL('img/logo128.png'),
      title: 'Removal required',
      type: 'basic',
      message: 'URL is',
      buttons: [{ title: 'Learn More' }],
      isClickable: true,
      priority: 2,
    }, function() {});

}

它不完整，但你会明白的。