logo标签列表

Chrome扩展程序引发“Uncaught (in promise) Error: Cannot access a chrome:// URL”错误。

google-chromegoogle-chrome-extensionchrome-extension-manifest-v3
10

我正在使用Chrome官方网站https://developer.chrome.com/docs/extensions/mv3/getstarted/上发布的教程学习如何创建Chrome扩展程序。

我已经复制并粘贴了所有代码，以相同的方式运行。但是在我的情况下，当我运行chrome.scripting.executeScript时，会出现"Uncaught (in promise) Error: Cannot access a chrome:// URL"错误。

我不知道问题出在哪里。这里是我从上面的链接中复制的代码:

  • manifest.json
{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}
  • background.js
let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log(`default color: ${color}`);
});
  • popoup.js
// Initialize button with user's preferred color
let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', ({ color }) => {
  changeColor.style.backgroundColor = color;
});

// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener('click', async () => {
  console.log('clicked');
  console.log(chrome.tabs);

  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  console.log(tab);

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
  chrome.storage.sync.get('color', ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}
  • popup.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css" />
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

您有一个想法吗？

7
未捕获的（在 Promise 中）错误：无法访问 chrome:// URL” 表示您正在尝试将内容脚本注入以 chrome:// 开头的页面中。这是不允许的。请先激活一个网页，然后再次推送操作图标。 - Robbi
@Robbi AMG，我懂了。我在chrome://extension里测试过了。你是对的。谢谢！ - Minsik Park
1
那么如何解决这个问题？ - Kamel Labiad
谢谢@Robbi，我也尝试在chrome://extensions/上操作，但每当我尝试在网页URL上操作时，它都能正常工作。 - mdmostafa
2个回答
17

当您尝试触发事件时，请确保您不在chrome://extensions/或类似页面中。

我在扩展页面，因此出现了错误。这对我有用。 - Biju P Dais
1
如何限制 host_permissions 仅在 https 下运行，而不允许扩展在 chrome:// URL 上运行。 - Graham Leggett
9
你可以检查URL，并避免注入脚本到“chrome：//”：
// skip urls like "chrome://" to avoid extension error
if (tab.url?.startsWith("chrome://")) return undefined;

chrome.scripting.executeScript({
   //...

我也在background.js中执行这个操作，因为我是在那里注入脚本：

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

  // skip urls like "chrome://" to avoid extension error
  if (tab.url?.startsWith("chrome://")) return undefined;

  if (tab.active && changeInfo.status === "complete") {
    chrome.scripting.executeScript({
       //...

注意。要访问tab.url，您需要在清单（V3）的“permissions”中添加“tabs”。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接