chrome.runtime.getURL() 无法将 javascript 文件注入我的清单 V3 网页答案

【问题标题】：chrome.runtime.getURL() unable to inject javascript file into my webpage for manifest V3chrome.runtime.getURL() 无法将 javascript 文件注入我的清单 V3 网页
【发布时间】：2022-12-10 09:39:28
【问题描述】：

背景：我正在制作一个 chrome 扩展，我必须将它迁移到 MV3。我修改了我的 manifest.json 文件以包含网络资源，但是当我使用 chrome.runtime.getURL 从我的内容脚本中注入我的资源时，它说找不到我的文件。具体来说...

获取：Chrome 扩展：://"the_url/inject_script.js" net::ERR_FILE_NOT_FOUND

我正在使用我的网络资源的内容根路径（我想注入到页面上的 javascript 元素），这是我阅读的使用 MV3 时需要使用的内容。下面是我的清单文件。

清单.json

 {
  "manifest_version": 3,
  "name": "Extension Prototype",
  "description": "Prototype for Canvas Extension",
  "version": "0.1.0",

  "icons": {
  },

  "web_accessible_resources": [{
    "resources": ["frontend/canvas-chrome-ext/src/scripts/inject_script.js"],
    "matches": ["<all_urls>"]
  }],

  "action": {
    "default_popup": "components/popup.html",
    "default_icon": "images/su_emblem.png"
  },
  "permissions": [
    "activeTab",
    "<all_urls>",
    "tabs",
    "scripting"
  ],

  "background": {
    "service_worker": "background.js"
  },

  "content_scripts": [{
    "matches": ["https://seattleu.instructure.com/", "*://www.google.com/", "https://canvas.instructure.com/*"],
    "js": ["scripts/Content.js"]
  }]
}

内容脚本

下面是我的内容脚本，它应该创建一个 scrip DOM 元素。脚本 (inject_script.js) 元素将一些按钮注入网页。

function injectScript(file_path, tag){
    var node = document.getElementsByTagName(tag)[0];
    var script = document.createElement("script");
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file_path);
    node.appendChild(script);
}

injectScript(chrome.runtime.getURL("frontend/canvas-chrome-ext/src/scripts/inject_script.js"), 'body');

下面是我的项目目录。

【问题讨论】：

您需要使用构建项目后出现的 dist 文件夹中的最终路径。可能是scripts/inject_script.js
该死的，谢谢我在使用 runtime.getURL 时将 Web 资源和我的参考中的路径从内容根目录更改为 scripts/inject_scripts.js 并且它起作用了。旁注我的目录中的 dist 文件夹是什么以及在哪里？

标签： javascript google-chrome-extension chrome-extension-manifest-v3 manifest.json

【解决方案1】：

wOxxOm 的回答帮助了我。

我使用内容根路径来引用我的 inject_script，但我应该使用 dist 文件夹中的最终路径。

【讨论】：