“在迁移到清单 V3 后,不允许加载本地资源: chrome://favicon/…”

huangapple go评论66阅读模式
英文:

"Not allowed to load local resource: chrome://favicon/..." after migrating to manifest V3

问题

我遇到了一个错误

无法加载本地资源: chrome://favicon/size/16@1x/https://google.com/

当我尝试将一个Chrome扩展的清单从v2迁移到v3时发生了这个错误。

我需要获取书签链接的网站图标,但无法加载本地资源。我该如何解决呢?

{
   "background": {
      "service_worker": "./src/background.js"
   },
   "action": {
      "default_popup": "./src/popup.html",
      "default_title": "极简主页"
   },
   "chrome_url_overrides": {
      "newtab": "./src/new-tab-page.html"
   },
   "description": "极简新标签页",
   "icons": {
      "128": "src/images/icon/icon_128.png",
      "16": "src/images/icon/icon_16.png",
      "32": "src/images/icon/icon_32.png",
      "48": "src/images/icon/icon_48.png"
   },
   "manifest_version": 3,
   "name": "极简主页",
   "permissions": [ "bookmarks", "storage", "sessions", "tabs", "favicon" ],
   "web_accessible_resources": [
      {
        "resources": ["_favicon/*"],
        "matches": ["<all_urls>"],
        "extension_ids": ["*"]
      }
    ],
   "version": "1.0"
}
    /* 追加(几乎)每个标签 */
      for (let tab of tabs) {
        let element = el(
          'div.link.truncate',
          el(
            'div.favicon',
            el(
              'img',
              {
                src: `chrome://favicon/size/16@1x/${tab.url}`,
                srcset: `
                  chrome://favicon/size/16@1x/${tab.url},
                  chrome://favicon/size/16@2x/${tab.url} 2x
                `
              }
            )
          ),
          tab.deviceName + ' › ' + tab.title,
          {
            href: '#',
            title: tab.title,
            'data-type': 'shortcut',
            click: () => {
              chrome.sessions.restore(tab.sessionId)
            },
            dragstart: (event) => {
              event.dataTransfer.setData('text/plain', tab.url)
            }
          }
        )

        if (box.children.length < 5) {
          box.appendChild(element)
        }
      }

我已经尝试了遵循谷歌关于从v2迁移到v3的文档,但并没有起作用。

我期望它能获取书签链接的网站图标,但我无法加载本地资源。

英文:

I'm getting the error

Not allowed to load local resource: chrome://favicon/size/16@1x/https://google.com/

This happened when I tried to migrate a manifest for a chrome extension from v2 to v3.

I need to fetch favicons for bookmarked links, but unable to load local resource. How do I fix it?

{
   &quot;background&quot;: {
      &quot;service_worker&quot;: &quot;./src/background.js&quot;
   },
   &quot;action&quot;: {
      &quot;default_popup&quot;: &quot;./src/popup.html&quot;,
      &quot;default_title&quot;: &quot;Minimal Homepage&quot;
   },
   &quot;chrome_url_overrides&quot;: {
      &quot;newtab&quot;: &quot;./src/new-tab-page.html&quot;
   },
   &quot;description&quot;: &quot;Minimal new tab page&quot;,
   &quot;icons&quot;: {
      &quot;128&quot;: &quot;src/images/icon/icon_128.png&quot;,
      &quot;16&quot;: &quot;src/images/icon/icon_16.png&quot;,
      &quot;32&quot;: &quot;src/images/icon/icon_32.png&quot;,
      &quot;48&quot;: &quot;src/images/icon/icon_48.png&quot;
   },
   &quot;manifest_version&quot;: 3,
   &quot;name&quot;: &quot;Minimal Homepage&quot;,
   &quot;permissions&quot;: [ &quot;bookmarks&quot;, &quot;storage&quot;, &quot;sessions&quot;, &quot;tabs&quot;, &quot;favicon&quot; ],
   &quot;web_accessible_resources&quot;: [
      {
        &quot;resources&quot;: [&quot;_favicon/*&quot;],
        &quot;matches&quot;: [&quot;&lt;all_urls&gt;&quot;],
        &quot;extension_ids&quot;: [&quot;*&quot;]
      }
    ],
   &quot;version&quot;: &quot;1.0&quot;
}
    /* append (almost) every tab */
      for (let tab of tabs) {
        let element = el(
          &#39;div.link.truncate&#39;,
          el(
            &#39;div.favicon&#39;,
            el(
              &#39;img&#39;,
              {
                src: `chrome://favicon/size/16@1x/${tab.url}`,
                srcset: `
                  chrome://favicon/size/16@1x/${tab.url},
                  chrome://favicon/size/16@2x/${tab.url} 2x
                `
              }
            )
          ),
          tab.deviceName + &#39;  &#39; + tab.title,
          {
            href: &#39;#&#39;,
            title: tab.title,
            &#39;data-type&#39;: &#39;shortcut&#39;,
            click: () =&gt; {
              chrome.sessions.restore(tab.sessionId)
            },
            dragstart: (event) =&gt; {
              event.dataTransfer.setData(&#39;text/plain&#39;, tab.url)
            }
          }
        )

        if (box.children.length &lt; 5) {
          box.appendChild(element)
        }
      }

I've tried following Google documentation about migrating from v2 to v3, but it hasn't worked.

I expect this to fetch favicons for bookmarked links, but I'm unable to load local resource.

答案1

得分: 1

在 Manifest V3 中,加载网站图标的方式略有变化。有一个完整的迁移指南,你可以在这里找到:https://developer.chrome.com/docs/extensions/mv3/favicon/。

简而言之,你需要在清单文件中请求 favicon 权限。然后,如果你需要在非扩展页面加载网站图标,你需要在清单文件中将 URL 暴露在 web_accessible_resources 下:

"web_accessible_resources": [
  {
    "resources": ["_favicon/*"],
    "matches": ["<all_urls>"],
    "extension_ids": ["*"]
  }
]

然后,你可以按照以下方式加载网站图标:

chrome-extension://[YOUR_EXTENSION_ID]/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&amp;size=32

英文:

In Manifest V3, the way favicons are loaded has changed slightly. There's a full guide for migrating here: https://developer.chrome.com/docs/extensions/mv3/favicon/.

As a TLDR, you'll want to request the favicon permission in your manifest. Then, if you need to load the favicons in to non-extension pages, you'll need to expose the URL under web_accessible_resources in your manifest:

&quot;web_accessible_resources&quot;: [
  {
    &quot;resources&quot;: [&quot;_favicon/*&quot;],
    &quot;matches&quot;: [&quot;&lt;all_urls&gt;&quot;],
    &quot;extension_ids&quot;: [&quot;*&quot;]
  }
]

You should then be able to load favicons as follows:

chrome-extension://[YOUR_EXTENSION_ID]/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&amp;size=32

huangapple
  • 本文由 发表于 2023年2月27日 16:02:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/75578002.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定