如何导入npm模块mark.js在chrome扩展中使用？

Question

我尝试将模块mark.js导入到chrome扩展中。我试过修改chrome教程中的代码。这是我最近尝试过的：

manifest.json

{
  "name": "Highlight",
  "version": "1.0",
  "description": "Highlight some text",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["http://*.com/*"],
      "js": ["mark.js"]
    }
  ],
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.js (在popup.html中调用)

let changeColor = document.getElementById('changeColor');

changeColor.onclick = function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
      tabs[0].id,
      {code: 'var context = document.querySelector(".article-body-component"); var instance = new Mark(context); instance.mark("grows");'});
  });
};

当我单击站点上的按钮时，出现错误Uncaught ReferenceError: Mark is not defined at <anonymous>:1:100

这是不是我需要npm模块的方式有问题，或者也许我拿错了文件？我使用npm install mark.js安装了npm模块，然后从npm_modules/mark.js/dist/mark.js复制了一个文件。

Answer 1

遵循this comment，我做了以下更改，并且它起作用了！

let changeColor = document.getElementById('changeColor');

changeColor.onclick = function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(null, { file: "mark.js" }, function() {
      chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'var context = document.querySelector(".article-body-component"); var instance = new Mark(context); instance.mark("grows");'});
    })
  });
};