扩展清单必须请求访问相应主机或不同错误的权限

Question

我正在尝试构建扩展，但在注入函数时遇到问题。

这是我正在尝试处理的 link，我怀疑开头的 blob 是问题所在。

blob:https://web.whatsapp.com/29d92fb3-d8e1-4c84-89af-b51668f5d2b3

这是我的 manifest.json 文件：

 {
    "name": "Image rotator",
    "version": "1.0",
    "manifest_version": 3,
    "description": "An extension to rotate images in web page.",
    "background": {
        "service_worker": "src/background.js"
      },
      "permissions": ["contextMenus","scripting","storage", "declarativeContent", "activeTab","<all_urls>"],
      "host_permissions": [
        "*://web.whatsapp.com/*"
      ]
      
}

这是我的 background.js 文件：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    "id": "rotateImage",
    "title": "Rotate Image",
    "contexts": ["image"]
  })
});

function injectedFunc() {
  document.getElementsByTagName("img").style.transform = "rotate(90deg)";
};

try {
  chrome.contextMenus.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
      target: {
        tabId: tab.id
      },
      function: injectedFunc
    });
  });
} catch (e) {
  console.error(e);
}

在这个版本中，我得到这个错误：

Error in event handler: TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'target': Missing required property 'tabId'.

如果我将 onClicked 方法更改为此版本：

try{
chrome.contextMenus.onClicked.addListener((info, tab) => {
    if(info.menuItemId === "rotateImage"){
    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        function: injectedFunc
      });}
  });
} catch (e) {
    console.error(e);
  }

我收到这个错误：

Uncaught (in promise) Error: Cannot access contents of the page. Extension manifest must request permission to access the respective host.

Answer 1

第二个变体是正确的，根据 this 我需要将 "match_origin_as_fallback": true, 添加到“content_script”内的 manifest.json 文件以使浏览器成为能够读取 blob URL.

但还是不行，我需要将注入的代码添加到与 background.js 不同的文件中。

在 Reddit 的帮助下（感谢 Ibrahim_AA），sendMessage 和 onMessage API 完成了工作。这是完整的解决方案：

manifest.json:

{
  "name": "Image rotator",
  "version": "1.0",
  "manifest_version": 3,
  "description": "An extension to rotate images in web page.",
  "background": {
    "service_worker": "src/background.js"
  },
  "permissions": ["contextMenus","scripting"],
  "host_permissions": [
    "*://web.whatsapp.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["*://web.whatsapp.com/*"],
      "match_origin_as_fallback": true,
      "js": ["contentScript.js"]
    }
  ]
}

background.js:

chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        "id": "rotateImage",
        "title": "Rotate Image",
        "contexts": ["image"]
    })
});

try{
    chrome.contextMenus.onClicked.addListener((info, tab) => {
        if(info.menuItemId === "rotateImage"){
            chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {
                    type: "rotateImage",
                });
            });
        }
    });
} catch (e) {
    console.error(e);
}

contentScript.js

function rotateImage() {
  document.getElementsByTagName("img")[0].style.transform = "rotate(90deg)";
};

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.type === 'rotateImage') {
        rotateImage();
    }
});

希望它能帮助遇到此问题的任何人。

扩展清单必须请求访问相应主机或不同错误的权限

Extension manifest must request permission to access the respective host or a different Error

javascript

json

contextmenu

code-injection

google-chrome-extension