单击按钮发送提取命令并抓取网络数据

Question

我正在制作一个 Google Chrome 扩展，我有一些 API 的获取命令。单击按钮时如何发送它们？或者我该怎么办？

Chrome 扩展抓取进度条的最佳方式是什么？假设来自 YouTube 并将其放入扩展程序中，以便它仍然有效，这样我就可以倒带和快进？

最终目标是看起来像这样的弹出窗口，当我点击播放或任何按钮时，它会发送 api 调用或获取命令（youtube 只是一个例子） 1

Answer 1

您应该实现一个具有执行 API 调用功能的后台脚本。我建议在后台执行此调用的原因是它将独立于选项卡的生命周期进行处理：如果用户关闭选项卡，api 调用会随着选项卡终止。在您的清单中，您将需要添加对服务器域的后台脚本和主机权限的引用，除非服务器具有从任何地方启用 CORS 的策略。

要让按钮单击以在后台调用 api 函数，请使用 message passing：单击按钮时，您从带有按钮的选项卡发送消息，并在后台服务中worker 实现了一个监听器来接收这些消息。当后台侦听器收到按钮单击消息时，它会执行 API 调用。如果 API 调用需要一些参数，则该消息可以包含其他数据。

就代码而言，您将需要以下内容：

service_worker.js

// implement listener to receive messages from tabs
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {    
    if (request.api)
      callApi(request.my_arg)
  }
);


function callApi(arg){
  // implement this to perform API call
}

manifest.json

 "host_permissions": [    
    "https://your-api-domain.com/*"
  ],
 "background": {
    "service_worker": "service-worker.js"
  },
 "content_scripts": [
    {
      "matches": [ "YOUR MATCH PATTERN HERE" ],
      "js": [ "content-script.js" ]
    }
  ]

内容-script.js

// add button onclick/onkeypress handler
button.onclick = sendMessage;

function sendMessage(args){    
  chrome.runtime.sendMessage({api: "call api", my_arg:1});
}

单击按钮发送提取命令并抓取网络数据

Sending fetch commands on button click and scraping webdata

html

javascript

css

google-chrome-extension