/reactextensioninject

Got the popup to inject on screen, but now popup.html is blank when loaded.

Primary LanguageJavaScript

Overview and issue

This is the boilerplate that allows me to inject src/content.js into any tab. This is the functionality I'm looking for, just trying to add hot-reloading.

This boiler plate was generated by downloading this repo and then following the instructions from from u/trozler and u/axelmierczuk's in this issues thread.

Issues with adding hot reloading

I have tried to enable hot-reloading with this repo, with both installation instructions. Installing as a plugin doesn't give me any errors, but it just doesn't work. When I try CLI, I get the below error. I checked the issues on github, looks like it hasn't been maintained, but I do know that it is working with some versions of webpack as I used another git repo, which is a boiler plate react extension that uses that hot-reloading repo.

I suspect it's not worth trying to get this code to work with that repo as it has not been maintained. It may be better

Williams-MacBook-Pro-2:inject wl$ npx webpack-extension-reloader
14 Apr 16:40:51 - [Error] Couldn't require the file: /Users/wl/projects/inject/webpack.config.js
14 Apr 16:40:51 - Error: Cannot find module '/Users/wl/projects/inject/webpack.config.js'
Require stack:
- /Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack-extension-reloader-cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.exports.default (/Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack:/client/args-parser.ts:33:27)
    at Object.<anonymous> (/Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack:/client/index.ts:12:44)
    at __webpack_require__ (/Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack:/webpack/bootstrap:19:1)
    at /Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack:/webpack/bootstrap:83:1
    at /Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack-extension-reloader-cli.js:99:10
    at webpackUniversalModuleDefinition (/Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack:/webpack/universalModuleDefinition:3:1) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/wl/projects/inject/node_modules/webpack-extension-reloader/dist/webpack-extension-reloader-cli.js'
  ]
}
Williams-MacBook-Pro-2:inject wl$ npx webpack-extension-reloader
14 Apr 16:42:24 - [Error] Couldn't require the file: /Users/wl/projects/inject/config/webpack.config.js
14 Apr 16:42:24 - Error: The NODE_ENV environment variable is required but was not specified.
    at Object.<anonymous> (/Users/wl/projects/inject/config/env.js:12:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/wl/projects/inject/config/webpack.config.js:24:30)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
Williams-MacBook-Pro-2:inject wl$ npx webpack-extension-reloader
14 Apr 16:44:15 - [Error] Couldn't require the file: /Users/wl/projects/inject/config/webpack.config.js
14 Apr 16:44:15 - Error: The NODE_ENV environment variable is required but was not specified.
    at Object.<anonymous> (/Users/wl/projects/inject/config/env.js:12:9)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/wl/projects/inject/config/webpack.config.js:24:30)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

Changes made after downloading repo

The exact changes I made were:

  1. Included this in manifest
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "css": [
        "/static/css/main.chunk.css",
        "/static/css/content.chunk.css"
      ],
      "js": [
        "/static/js/0.chunk.js",
        "/static/js/5.chunk.js",
        "/static/js/content.chunk.js",
        "/static/js/runtime-content.js"
      ],
      "run_at": "document_end"
    }
  ],
  1. Updated entry on line 172 of webpack.config.js to:

entry: {
main:
isEnvDevelopment && !shouldUseReactRefresh
? [
webpackDevClientEntry,
paths.appIndexJs,
]
: paths.appIndexJs,
content:
isEnvDevelopment && !shouldUseReactRefresh
? [webpackDevClientEntry, paths.appContentJs]
: paths.appContentJs,
},
  1. Added appContentJs: resolveModule(resolveApp, "src/content") to path.js under module.exports.

From there, I was able to inject the content script. However, the tutorial says that the same component should load into the popup when the extension icon is clicked.

I suspect it may have to do with something in webpack.config.js.

Ultimately, I would like the contentscript and normal extension popup to be the same component. Please let me know if you see what I am doing wrong here! Thanks.