Manifest V3不再支持远程代码

Xiaoyu Cheng

已于 2024-01-18 09:29:25 修改

阅读量563

点赞数 10

文章标签： javascript 前端开发语言

于 2024-01-10 13:12:10 首次发布

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

版权

Manifest v2里面可以轻松做到加载远程code，但v3 已经被限制到只能用参数了。

可以发现，把函数放入扩展内可以运行excuteScript，但放入远端文件不行。以下是测试案例：

首先，不行的案例：

报错显示没有定义远端文件中写到的代码函数greetUser。

具体代码如下：

远端test6.js:

function greetUser(name) {
  alert(`Hello, ${name} from remote script!`);
}

manifest.json

{
  "manifest_version": 3,
  "name": "Remote JS code test",
  "version": "3.0",
  "permissions": [
    "activeTab",
    "storage", 
    "declarativeContent", 
    "scripting"
  ],
  "host_permissions": ["http://localhost:8000/"],
  "background": {
    "service_worker": "background.js"
  },  
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon_blog.png",
      "48": "images/icon_discover.png",
      "128": "images/icon_forum.png"
    }
  }
}

popup.html

<!-- 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

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

background.js

// background.js
// function greetUser1(name) {
//     alert(`Hello, ${name} from remote script!`);
//   }
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    // 接收来自 popup.js 的消息
    if (message.action === 'loadRemoteScript') {
      fetch('http://localhost:8000/test6.js')
        .then(response => response.text())
        .then(script => {
          // 在这里使用下载的脚本
          console.log(script);
          // 执行远程脚本
          chrome.scripting.executeScript({
            func: greetUser,
            args: ['Sherry'], // 传递给 greetUser 函数的参数
          });
        })
        .catch(error => console.error('Error fetching script:', error));
    }
});

2. 函数在扩展内可以成功

代码如下：

manifest.json

{
    "manifest_version": 3,
    "name": "Test Extension",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html"
    },
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "activeTab",
        "storage", 
        "declarativeContent", 
        "scripting"
    ]
}

popup.html

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Test Extension</title>
    <script src="popup.js"></script>
</head>
<body>
    <h1>Test Extension</h1>
    <button id="executeButton">Execute Script</button>
</body>
</html>

popup.js

// popup.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('executeButton').addEventListener('click', function() {
        chrome.runtime.sendMessage({ action: 'executeScript' });
    });
});

background.js

// background.js
function greetUser(name) {
    alert(`Hello, ${name}!`);
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'executeScript') {
        fetch('http://localhost:8000/test7.js', { mode: 'no-cors' })
            .then(response => response.text())
            .then(data => {
                let givenName = data.givenName || '<GIVEN_NAME>';
                chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
                    if (tabs && tabs.length > 0) {
                        chrome.scripting.executeScript({
                            target: {tabId: tabs[0].id},
                            func: greetUser,
                            args: [givenName],
                        });
                    } else {
                        console.error('No active tab found.');
                    }
                });
            })
            .catch(error => console.error('Error fetching user data:', error));
    }
});