• Safari: wont end up in the list till it does support Webextensions API

• Edge: supports this starter in the latest chromium based version only. (not backward compatible) This version of edge supports installing this extension from Chrome store.

• Other Chromium based browsers: should work on browsers that are based on Chromium 49 and later. Recommended to use the latest version of the browser. These browsers could install published extension from the Chrome store itself.

• Chrome: From version 49

• Firefox: From version 52

• Opera: From version 36

The limitation of backward compatibilty and missing of several APIs in old versions are the reason for setting support from the above mentioned versions.

The extension starter has been tested in all of the above browsers and so added to readme.

Reference: https://caniuse.com/usage-table

I have tried the classic .env with REACT_APP prefix, but it does not work, I guess that is only for react-script.
Does this package it support something similar?
Thanks

See the progress at abhijithvijayan/eslint-config#3

Feature Request

I can't understand its role in this project. Is it possible to use a general solution?

use webpack-extension-reloader

@abhijithvijayan I follow your prompt to delete the relevant files and modify the package.json file:

"build": "npm run build:chrome && npm run build:firefox && npm run build:opera"

Follow readme.md, run:

npm run dev:firefox

But I'm having a small problem,if you know how to fix it please let me know. (I don't know if I'm going to encounter it with yarn),Source map error problems have kept me at bay.

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://f3e071f8-a623-4e01-9f41-8c1d7afeec8e/js/contentScript.bundle.js
Source Map URL: browser-polyfill.js.map

I didn't modify travis.yml file because I didn't use 'travis-ci'.

I'm getting this error and there's no reference to what's causing it. manifest.json is basically the same as in the starter.

ERROR in ./source/manifest.json
Module Error (from ./node_modules/wext-manifest-loader/lib/index.js):
Cannot read property 'replace' of undefined

Write Once Run on Any Browser

In readme

Comment here and submit a PR

For some reason, all website colors are inverted whenever I activate this boilerplate extension.

Just git pulled and loaded into the latest chrome, no other changes. It goes back to normal when I remove/disable this specific extension and I can't find any styles that lead to this. There's nothing else to attribute this to except this extension being loaded.

What's going on? Any ideas?

The logs get congested with each build and change

Optimize output stats to show only errors, buildtime, and few other stats

Webpack gives error for image import as no appropriate loaders are set for it.

In manifest/index.js, there's the field short_name. What is it for ?

In сhrome, extensions not working on extension page(e.g. options.html)
And i dont know a way to make them work

How do you use React Devtools?
Is there some easy way?

I'm trying to use react-devtools-inline for now, and I will share the solution later, if there are no simpler/convenient solutions

As the manifest is generated at runtime, this could be used to inject the scripts source with webpack to manifest.json instead of setting js/background.js as static to prevent caching of scripts which when receives an update.

some people think typescript is extra overhead when you have a time constraint.

It is better to use something like wext-manifest to generate manifest files

The repo https://github.com/s-panferov/awesome-typescript-loader is archived

Hence migrate to

https://www.npmjs.com/package/fork-ts-checker-webpack-plugin

currently manifest is generated from a js file

this could be changed to load from a manifest json file using custom loader
after adding manifest file as an entry

this will presumably auto build json on every change

see progress for loader at abhijithvijayan/wext-manifest-loader#4

I'm aware of the previous issue

not sure how the fix worked for you, when basically you are telling webpack not to generate them.

Hello,
Thank you for your work.
Would it be possible to add npm tasks to automatically publish to the Firefox and Chrome stores?
It is possible with:
https://www.npmjs.com/package/web-ext-submit FF
https://www.npmjs.com/package/chrome-webstore-upload-cli Chrome

I will submit a PR if I find some time :/

for the typescript version

Sorry if it's not the place, probably it's not an issue, but I don't know where to ask.

I use React with Typescript. In ContentScript I load a custom component which is in source/shared/components/MyComponent/MyComponent.tsx

and I create a Scss for it: source/shared/components/MyComponent/MyComponent.scss

I notice that the styling is added in extension/firefox/css/contentScript.css when it's built, but It's not loaded when I run my browser extension.

It's possible to make it work or only inline CSS can work?

Thank you!

webpack gives error for importing images in react

Create a new branch with react.js for UI & TypeScript support

When I try to integrate salesforce/design-system-react it's showing babel-preset-env not found. Not sure is it salesforce/design-system-react design system issue or web-extension-starter issue.

https://github.com/fregante/webext-base-css

Thanks for the extremely useful plugin!

The sync-scroll feature doesn't play nicely with auto wrap lines on the latex side. For example, I write paragraphs as a very long line since I have screens of different sizes. On the right side, this causes the text in the textarea to be shifted to more than one page.

I can install it on new edge (chromium) without this issue.

yarn install # build is getting skipped in linux mint 20
yn0062
The platform linux is incompatible with this module, build skipped.

Add https://github.com/abhijithvijayan/kutt-extension

as a project demo that uses this template to README.

Is it possible to show the actual file contents inside source map without including webpack import. which sometimes difficult to debug

webextension_polyfill__WEBPACK_IMPORTED_MODULE_2___default.a.runtime.onMessage.addListener(function (msg) {
  var action = msg.action;
  console.log("msg::", msg);

  if (action == _message_actions__WEBPACK_IMPORTED_MODULE_7__["default"].IS_SCRIPT_INJECTED) {
    return Promise.resolve(true);
  }
});

In bitbucket readme file is not showing properly.

https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

Have you planed to add safari support ?

I have found previous issues (#9 and #11) that Safari uses its proprietary extension format, and web-extension-starter for Safari will not be worked on. I am curious about an updated plan since Safari supports WebExtension from Safari 14. Will there be a Safari branch?

References:

• https://developer.apple.com/safari/extensions/
• https://developer.apple.com/documentation/safariservices/safari_web_extensions
• https://hacks.mozilla.org/2020/06/welcoming-safari-to-the-webextensions-community/

If there are multiple extension using this boilerplate. Then if I put npm run dev:chrome then all the extension reloaded.

Any plans on upgrading this to work with manifest V3? Or a list of manual changes that need to be done? It doesn't seem to work out of the box for V3.

https://yarnpkg.com/advanced/migration

I have been trying to use your code base to set up a wrapper with Jest and Selenium-Webdriver in order to install the extension in Chrome and Firefox.

In case you would like to add this to your code, please find some starting points here:

https://github.com/slhck/web-extension-selenium-test

Particularly see the test scripts in package.json as well as the files in test/integration.

I've run into a bug with Firefox , where the XPI is not installed, but for Chrome it works fine.

I am not opening a PR at this stage because it is far from complete, but I'm leaving it here as a pointer.

The extension is not reloading in Chrome (version 91 tested)

In Firefox (version 89 tested) works perfectly as expected.

Currently there are 3 different manifest.json files for each of the browser.
This was initially aimed to tackle the different fields of manifest.json file that varies between browsers.

Add a better way to generate that according to the build varaint, so that the user needs to keep 1 manifest.json overall.

View the discussion on reddit

I tried injecting code via content script but didn't work

WARNING in Conflict: Multiple assets emit different content to the same filename css/styles.css

When styles.scss is imported directly to index.tsx in each of the components, it replaces the initial build file with the following build file causing missing styles.

---Component_A/
   |
   index.tsx
   |
   styles.scss

---Component_B/
   |
   index.tsx
   |
   styles.scss

CRA handles this nice and smooth without any duplication.

I have been unsuccessful in trying to import a file from npm package into a web page through content_script. I want to import this file on an action from popup browser action.

To establish the basic setup, I tried importing your emoji-log library. I followed the following steps:

1. Add new CopyWebpackPlugin([{from: 'node_modules/emoji-log/lib/index.js', to: 'js/emoji-log/lib/index.js'}]), in webpack.config.js
2. Add following in manifest.json.

"web_accessible_resources": [
  "js/emoji-log/lib/index.js"
],

3. In content script. (Right now for testing purpose, I am opening it directly. Otherwise I want to open it on an action)

import browser from 'webextension-polyfill';
(async () => {
	const src = browser.extension.getURL("js/emoji-log/lib/index.js");
	await import(src);
})();

I get the following error:

Uncaught (in promise) Error: Cannot find module 'chrome-extension://bkglmbblddekhjgldmkjgadhojbhakjg/js/emoji-log/lib/index.js'

And strangely when I click on the filename, it opens up in the new tab straight away.

What am I missing here? I am stuck on this from quite a few hours.

(These instructions are mostly from here and here)

I'm using the React + TypeScript branch and using React in ContentScript,
When I make any change in the react files it takes about 40 seconds until I can see the change in the browser and the page reloaded.
How to make it faster as 40 seconds is too much?

I get

ERROR in ./src/ContentScript/index.ts
Module not found: Error: Can't resolve './FloatingPanel' in 'xxxxx/ContentScript'

/ContentScript/index.ts

import './FloatingPanel';

export {};

/ContentScript/FloatingPanel/index.jsx

import * as React from 'react';
import ReactDOM from 'react-dom';

function FloatingPanel() {
  return <div>aaaa</div>;
}

const mountPointID = 'gamification-floating-ui-root';
document.body.insertAdjacentHTML('afterend', `<div id="${mountPointID}" />`);
ReactDOM.render(<FloatingPanel />, document.querySelector(`#${mountPointID}`));

This will not work.

So, How to render a React widget right into the webpage?