如何使用选项卡.使用react执行脚本

Question

在我的一个组件中，当组件加载时，我希望我的扩展将脚本注入到扩展运行的当前选项卡中。该脚本实际上获取源代码并将其保存为字符串。

所以，在我的componentWillMount中，我试图以以下方式注入脚本…

componentWillMount() {
    var result = '';
    chrome.tabs.executeScript(null, {
        file: './js/scripts/getPageSource.js'
     }, function() {
        // If you try and inject into an extensions page or the webstore/NTP you'll get an error
        if (chrome.runtime.lastError) {
            result = 'There was an error injecting script : n' + chrome.runtime.lastError.message;
        }
    });
}

我的脚本的路径，./js/scripts/getPageSource.js是相对于我的index.html文件，我的反应应用程序正在使用。

我得到错误文件没有找到，所以我改变了相对于组件的路径，但我仍然去文件没有找到。

我想也许这不是正确的方式注入一个脚本到一个打开标签与反应，有更好的方式做到这一点?

编辑

这是我的manifest.json文件…

{
  "name": "Get pages source",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Get pages source from a popup",
  "browser_action": {
    "default_popup": "src/index.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

我的路径./js/scripts/getPageSource.js位于上面引用的src文件夹内

Answer 1

使用与清单相关的路径。json文件。

MDN状态:

在Firefox中，相对URL是相对于当前页面URL进行解析的。在Chrome中，这些URL是相对于附加组件的基础URL解析的。

从您的清单。json，看起来你的file应该是:

file: 'src/js/scripts/getPageSource.js'