javascript - 在没有 pageAction 或 browserAction 的情况下执行扩展操作

Question

我正在为我的网站制作一个专用扩展程序，我想知道是否可以让该扩展程序仅响应我网站上的特定按钮单击。我希望能够在用户单击页面上的捕获按钮时执行 captureVisibleTab。

Answer 1

概述

1. 注入(inject) Content Script进入相关网页。
2. 将事件监听器附加到按钮。
3. 在该监听器中，send a message到背景页面。
4. 在后台选项卡中，执行captureVisibleTab。

<小时/>

更多详细信息

1) 添加内容脚本 to your manifest :

"content_scripts" : [{
  "matches": ["*://example.com/path/to/page"]
  "js" : ["content.js"]
}]

2) 在内容脚本(默认情况下将在页面加载后运行)中，为按钮分配一个监听器:

// content.js
document.getElementById("myButton").addEventListener("click", handler);

3) 在该处理程序内，向后台页面发送消息:

// content.js
function handler(){
  chrome.runtime.sendMessage({ myButton : true });
}

4)在后台页面中，监听该消息并执行您想要的代码:

// background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
  if(message.myButton) { doStuff(sender); }
});

function doStuff(tab){
  // captureVisibleTab or whatever you want 
}

<小时/>

替代解决方案

正如 abraham 所建议的，可以使用 External Messaging让您的页面本身发送消息。

1) 将您的网站添加到“extenrally_connectable” list 字段:

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

2) 如果用户安装了您的扩展程序，您的网页中将公开 chrome.runtime.sendMessage。您需要know your extension's ID使用它。

// website.js
if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  // Installed
  var extensionId = "abcdefghijklmnoabcdefhijklmnoabc";
  chrome.runtime.sendMessage(extensionId, { myButton : true });
  // Maybe do some error-handling in a callback
}

3) 在后台，您需要使用onMessageExternal:

// background.js
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url == "http://example.com/path/to/page" && message.myButton) {
      doStuff(sender);
    }
  }
);