从远程服务器请求JS文件-Manifest V3

Xiaoyu Cheng

已于 2024-01-09 13:03:30 修改

阅读量432

点赞数 6

文章标签： javascript 服务器前端

于 2024-01-08 21:47:18 首次发布

本文链接：https://blog.csdn.net/qq_41641505/article/details/135467258

版权

本文介绍了如何使用Chrome扩展API（如ManifestV3、ServiceWorker和RuntimeAPI）实现远程JavaScript文件（如test4.js）的加载和在popup中与服务器交互。用户通过点击按钮触发加载过程，实现跨源资源的加载并查看其内容。

摘要由CSDN通过智能技术生成

扩展代码如下:

Manifest.json:

{
    "manifest_version": 3,
    "name": "Remote JS Loader(Manifest V3)",
    "version": "2.0",
    "host_permissions": ["http://localhost:8000/"],
    "background": {
      "service_worker": "background.js"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon_blog.png",
        "48": "icon_discover.png",
        "128": "icon_forum.png"
      }
    }
  }

background.js:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    // 接收来自popup.js的消息
    if (message.action === 'loadRemoteScript') {
      fetch('http://localhost:8000/test4.js')
        .then(response => response.text())
        .then(script => {
          // 在这里使用下载的脚本
          console.log(script);
        })
        .catch(error => console.error('Error fetching script:', error));
    }
  });

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Remote JS Loader (Manifest V3)</title>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Remote JS Loader (Manifest V3)</h1>
  <button id="loadButton">Load Remote Script</button>
</body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('loadButton').addEventListener('click', function() {
        // 在点击按钮时执行的代码
        chrome.runtime.sendMessage({ action: 'loadRemoteScript' });
    });
});

然后在服务器部署test4.js文件