Chrome插件在HTTPS页面获取HTTP接口数据

2024-04-16 22:09:36 700

场景是这样的, 插件要在https页面根据规则做拦截, 但是获取规则的接口并不是https的.

发起请求时, 被浏览器的安全策略给拦了.

这里记录下解决思路

页面上不能进行请求, 但是service-worker里是可以的

所以将service-worker获取到的数据传到页面即可

1. service-worker发起请求
2. service-woker注册content-script
3. 将数据通过chrome.storage.local.set缓存起来
4. 在content-script通过chrome.storage.local.get读取数据
5. 在content-script中将数据拼接为字符串形式的js代码
6. 在content-script中创建一个Element, 追加到页面中
7. 页面js读取Element的text, 通过e v a l()为指定变量赋值

通常场景下的请求接口获取数据, 可以在content-script设置定时器

setInterval(() => {
  chrome.runtime.sendMessage({ greeting: "Hello from content script!" });
}, 5000);

service-worker中

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  // do something
});

同样通过页面元素进行请求和响应的交互, 保持service-worker的唤醒即可

• js
• chrome