Question

由于最新的Firefox支持没有标记的ES模块以及Chrome，我想使用import / export作为我的网络扩展（附加组件）。只需使用<script type="module">即可弹出，后台和选项页面。

如何使模块在content script中运行？

我试过并看到了以下内容：

（1）只需在import content_scripts.js manifest.json声明的行为中写下import Foo from './foo.js';即可

tabs.executeScript()

（Chrome）Uncaught SyntaxError：意外的标识符

Firefox无法正常使用。

（2）浏览browser.tabs.executeScript(undefined, { file: "foo.js", });

type="module"

（Chrome）Uncaught SyntaxError：意外的标识符

（Firefox）错误：导入声明可能只出现在模块的顶层

（3）插入使用const el = document.createElement("script"); el.src = browser.extension.getURL("foo.js"); el.type = "module"; document.body.appendChild(el);

创建的脚本元素

#!commentPlacer() 
{

arg=($1)   #argument
len=${#arg[@]}    #length of the argument
comment=;    #character to look for in second loop
commaIndex=(${arg[@]#;})   #the attempted index look up
commentSpace="    ;"    #the variable being concatenated into the array

for(( count1=0; count1 <= ${#arg[@]}; count1++ ))  #search the argument looking for comment space
do  if [[  ${arg[count1]} != commentSpace ]]  #if no commentSpace variable then
      then  for (( count2=0; count2 < ${#arg[count1]} ; count2++ ))    #loop through again
                do if [[ ${arg[count2]} != comment  ]]  #if no comment
                    then A=(${arg[@]:0:commaIndex})
                    A+=(commentSpace)
                    A+=(${arg[@]commaIndex:-1})  #concatenate array
                    echo "$A"
                fi
        done
    fi
done

}

（Chrome）未捕获（承诺）ReferenceError：浏览器未定义

（Firefox）ReferenceError：浏览器未定义

你还有其他想法吗？

Answer 1

一个简单的解决方案是使用某些捆绑程序来捆绑您的内容脚本。
听起来可能很复杂，但使用 Rollup 这样的捆绑程序，您可以使用超级简单的“ rollup.config.js”文件轻松完成此操作：

export default {
  input: 'content_script.js',
  output: {
    file: 'bundle_content_script.js',
    format: 'iife',
  },
};

汇总只会将您的导入内容替换为实际代码，因此没有样板，并且代码仍然可读。

您可能还需要阅读：

捆绑销售商比较：https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364
捆绑多个脚本：https://github.com/rollup/rollup/issues/703

使用捆绑程序还可以加快加载时间，对我来说，它从335ms减少到63ms（但是我现在有100多个模块）。

使用Web扩展的content_scripts中的ES模块（附加组件）

1 个答案: