adambullmer / vue-cli-plugin-browser-extension

Browser extension development plugin for vue-cli 3.0
GNU Lesser General Public License v3.0
427 stars 76 forks source link

Remove browser polyfill not work #134

Open tvrONHzhIEUz opened 2 years ago

tvrONHzhIEUz commented 2 years ago

Describe the bug Event configure this in vue.config.js , the dist entry files still have webextension-polyfill module code

chainWebpack: (config) => {
    // adambullmer/vue-cli-plugin-browser-extension seems conflict with webextension-polyfill-ts
    // And browser object will be undefined
    // To support Typescript, Follow https://github.com/adambullmer/vue-cli-plugin-browser-extension#browser-polyfills to remove the webpack chain 'provide-webextension-polyfill'
    config.plugins.delete('provide-webextension-polyfill')
    config.module.rules.delete('provide-webextension-polyfill')
  }

inject.js inject by content-script like this

document.addEventListener("DOMContentLoaded", function () {
    var temp = document.createElement("script");
    temp.setAttribute("type", "text/javascript");
    temp.src = chrome.extension.getURL("js/inpage.js");

    temp.onload = function () {
      this.parentNode.removeChild(this);
    };
    document.body.appendChild(temp);
  });

Expected behavior Remove all webextesion-polyfill in dist entry file

Screenshots image image image

Name Version
vue-cli-plugin-browser-extension latest
Operating System mac
Node v16.13.0
NPM/Yarn yarn 1.22.17
vue-cli 4.5.15
vue-cli-service 4.5.15
browser chrome
mclberlin commented 2 years ago

@tvrONHzhIEUz Just now I stumbled upon the same issue. Did some digging and found out that even if you remove the plugin and loader registrations from the source code (node_modules/vue-cli-plugin-browser-extension/index.js) the polyfill will still be inserted into the scripts. Some more digging revealed that the polyfill is being inserted by the webpack-extension-reloader*, which is used by vue-cli-plugin-browser-extension under the hood.

The extension-reloader is doing that w/o providing any options for disabling it :/ I will post an issue on its github page.

*Here is where they insert the polyfill.

Update: Here the issue, filed on the github repo page of the webpack-extension-reloader plugin

Update: Cited plugin webpack-extension-loader is for development mode only. So, having deleted** the plugin and loader from vue-cli-plugin-browser-extension the polyfill should only ever be inserted while being in development mode - which seems fine with me.

**

config.plugins.delete('provide-webextension-polyfill');
config.module.rules.delete('provide-webextension-polyfill');