Chrome 浏览器扩展中的“隔离世界”捆绑

Question

我正在考虑如何构建我的代码。

由于 Chrome 浏览器中的某些代码在“孤立的世界”、小型虚拟机中运行，因此我很难在不创建大量重复代码的情况下捆绑我的 Javascript。

对于我的浏览器扩展，我想添加一个侦听器，它具有回调函数

someFunctionToUnpack

。

// typescript
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'DO_STH') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const tab = tabs[0];
      if (tab && tab.id !== undefined) {
        chrome.scripting.executeScript({
          target: { tabId: tab.id as number },
          func: someFunctionToUnpack, // Type: func: () => void
        });
      }
    });
  }
});

理想情况下，它包含我可以在其他地方重复使用的代码，因为我确实需要在其他地方使用此代码。

// typescript
import { some } from "anotherFile.ts";

const anotherFunctionCall = ()=> {
  return some.objectContainingFunctions();
}
const doSomthingWithA = (a)=> {
  console.log(a);
}

const someFunctionToUnpack() {
  const a = anotherFunctionCall()
  doSomethingWithA(a);
}

如果我这样做，我当前的设置将以某种未定义 object() 的方式进行编译。

// In the VM, which has got the callback and
// is now isolated from the rest of the compiled javascript:
(()=>{
  const e = (()=>{
    const e = {
      some.objectContainingFunctions() // breaks here
    };
    console.log(e);
  })()
}
)()

在正常环境下，我们会将所有东西捆绑到绝对最低限度，我 需要完全解压一些代码并有意重复，以便 Chrome 扩展中的事件侦听器的回调可以访问它们的引用，同时我仍然避免编写重复的代码。

因为它在虚拟机中中断，我被迫将代码复制并移动到

someFunctionToUnpack

并创建重复的代码。

我正在使用 Webpack 5

module.exports = {
  entry: {
    'service-worker': './src/service-worker.ts',
    'content': './src/content.ts',
    'index': './src/backend/index.ts',
  },
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: '[name].js',
    clean: true
  },
  resolve: {
    extensions: ['.ts', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'json-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        chunks: ['index'],
      }),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/manifest.json', to: 'manifest.json' },
        { from: 'src/icons', to: 'icons' },
        { from: 'src/styles', to: 'styles' },
      ]
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: true,
        mangle: true
      }
    })],
  },
};

Answer 1

感觉有点 hacky，但我想我可以从中创建一个很好的重构，这也可以带来良好的可重用和干净的代码。

无论我有什么函数都需要成为对象的一部分，并且该对象需要从另一个函数返回。

// yourFunction.ts
// This can also be a named function in the same file of wherever you want to inject it
export default () => {
  return {
    yourProperty: (parameter) => {
      // do stuff...
    }
  }
}

// later in the file or another file
import YF from "./yourFunction";

export const someFunctionToUnpack = () => {
  const yourFunction = JC();
  yourFunction.yourProperty();
}

这可以用于

func

的

chrome.scripting.executeScript

。它将出现在浏览器的虚拟机中并满足“隔离世界”的需求。