sinanbekar/browser-extension-react-typescript-starter

🚀 React & TypeScript Starter for developing web extensions with hot reload!

Sinan Bekar

Full Stack Developer

           

browser-extension-react-typescript-starter's Issues

How do you upload the result?

The dist is a folder, do I need to add extra steps to bundle it as a file (then upload to github release)?

storage: createJSONStorage(() => localstorage) may lost data

I suggest use this:

// ...
      {
        name: 'preference-storage',
        storage: createJSONStorage(() => getExtensionStorage('preference-storage')),
      },

and

/* eslint-disable security-node/detect-crlf */
import { StateStorage } from 'zustand/middleware';

export const getExtensionStorage = (storageName: string): StateStorage => ({
  getItem: async (key: string): Promise<string | null> => {
    console.log(key, `has been retrieved in ${storageName}`);
    const result = await chrome.storage.sync.get(`${storageName}-${key}`);
    return result[`${storageName}-${key}`] as string | null;
  },
  setItem: async (key: string, value: string): Promise<void> => {
    console.log(key, 'with value', value, `has been saved in ${storageName}`);
    await chrome.storage.sync.set({ [`${storageName}-${key}`]: value });
  },
  removeItem: async (key: string): Promise<void> => {
    console.log(key, `has been deleted from ${storageName}`);
    await chrome.storage.sync.remove(`${storageName}-${key}`);
  },
});

Otherwise I found settings disappear after a while.

How can I add script.js?

Usually in vanilla js I use content_script.js that will inject script.js to the page but I can't find any example related to that?

const container = document.head || document.documentElement
const scriptTag = document.createElement('script')
scriptTag.setAttribute('async', 'false')
scriptTag.src = chrome.runtime.getURL('script.js')
container.insertBefore(scriptTag, container.children[0])
container.removeChild(scriptTag)

Second question is where to place that script.ts to trigger script.js build and include it in HMR?

'TS_NODE_COMPILER_OPTIONS' is not recognized as an internal or external command, operable program or batch file.

When I try yarn build vite build completes successfully, But it can not execute the firefox-build command

Service worker registration failed. Status code: 3 (latest version of vite)

Having some issues on dev with service worker not working. Any solution for this please?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @testing-library/react to v15
• chore(deps): update dependency eslint to v9
• fix(deps): update dependency @reduxjs/toolkit to v2
• fix(deps): update dependency react-redux to v9
• 🔐 Create all rate-limited PRs at once 🔐

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update dependency @testing-library/jest-dom to v6
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency typescript to v5
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vite to v4.5.3 [security]
• chore(deps): update actions/checkout action to v4

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v3
• actions/setup-node v3
• actions/checkout v3
• actions/setup-node v3
• actions/checkout v3
• actions/setup-node v3

npm

package.json

• @eduardoac-skimlinks/webext-redux 3.0.1-release-candidate
• @reduxjs/toolkit ^1.9.5
• @twind/core ^1.1.3
• @twind/preset-autoprefix ^1.0.7
• @twind/preset-tailwind ^1.1.4
• lodash-es ^4.17.21
• react 18.2.0
• react-dom 18.2.0
• react-redux ^8.1.0
• redux-persist-webextension-storage ^1.0.2
• reduxjs-toolkit-persist ^7.2.1
• webextension-polyfill ^0.10.0
• @crxjs/vite-plugin ^2.0.0-beta.17
• @testing-library/jest-dom ^5.16.5
• @testing-library/react ^14.0.0
• @testing-library/user-event ^14.4.3
• @types/fs-extra ^11.0.1
• @types/jest ^29.5.2
• @types/lodash-es ^4.17.7
• @types/react ^18.2.12
• @types/react-dom ^18.2.5
• @types/redux-persist-webextension-storage ^1.0.0
• @types/webextension-polyfill ^0.10.0
• @typescript-eslint/eslint-plugin ^5.59.11
• @typescript-eslint/parser ^5.59.11
• @vitejs/plugin-react ^4.0.0
• autoprefixer ^10.4.8
• construct-style-sheets-polyfill ^3.1.0
• eslint ^8.42.0
• eslint-config-prettier ^8.8.0
• eslint-plugin-prettier ^4.2.1
• eslint-plugin-react ^7.32.2
• eslint-plugin-react-hooks ^4.6.0
• fs-extra ^11.1.1
• identity-obj-proxy ^3.0.0
• jest ^29.5.0
• jest-chrome ^0.8.0
• jest-environment-jsdom ^29.5.0
• nano-staged ^0.8.0
• npm-run-all2 ^6.0.5
• postcss ^8.4.24
• prettier ^2.7.1
• rimraf ^3.0.2
• simple-git-hooks ^2.8.0
• tailwindcss ^3.3.2
• ts-jest ^29.1.0
• typescript 4.9.5
• vite ^4.3.9

---

• Check this box to trigger a request for Renovate to run again on this repository

CSP Issue when running HMR-enabled dev build on Firefox 117.0

Error messages:

Content-Security-Policy: The page’s settings blocked the loading of a resource at http://localhost:5173/@vite/env (“script-src”).
Content-Security-Policy: The page’s settings blocked the loading of a resource at http://localhost:5173/@crx/client-worker (“script-src”).
Content-Security-Policy: The page’s settings blocked the loading of a resource at http://localhost:5173/background/index.ts (“script-src”).

Popup:

Steps to reproduce:

1. npm run dev to build dist and start vite
2. npm run firefox-mv2-build to build dist-firefox-v2 from HMR-enabled chrome dist
3. Load unpacked extension at $PROJECT_DIR/dist-firefox-v2/manifest.json via about:debugging#/runtime/this-firefox > Load Temporary Add-on...
4. Inspect logs via about:debugging#/runtime/this-firefox > [Dev] Browser Extension TypeScript & React Starter > Inspect

How to use v3 in FireFox?

https://extensionworkshop.com/documentation/develop/manifest-v3-migration-guide/

Seems FireFox is also recommending V3. But I found it is impossible to pick dist folder from about:addons of Firefox, why? (After running pnpm dev)

CSS Modules not reloading

I might be missing something, but I was running with yarn dev and everything works with hot reloading except the CSS modules in the content folder. When I change the CSS nothing changes, even when I hard reload the page and extension. Any ideas on this?

Also is it possible to use Tailwind when injecting content into the page?