sinanbekar / browser-extension-react-typescript-starter Goto Github PK

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

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

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)

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.

• fix(deps): update dependency webextension-polyfill to ^0.12.0 (webextension-polyfill, @types/webextension-polyfill)
• fix(deps): update react monorepo to v18.3.1 (react, react-dom)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency rimraf to v6
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• 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 actions/setup-node action to v4
• 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 typescript to v5
• chore(deps): update typescript-eslint monorepo to v8 (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 actions/checkout action to v4

Detected dependencies

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

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?

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.

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

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

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?

Description

I encountered an error when attempting to start the development server using yarn dev. The error message indicates that there are invalid characters in the file path, which prevents the server from starting.

Steps to Reproduce

1. Clone the repository.
2. Run yarn install to install dependencies.
3. Run yarn dev to start the development server.

Expected Behavior

The development server should start successfully and listen on the specified port.

Actual Behavior

The following error occurs:

yarn dev
yarn run v1.22.22
$ run-s clean && vite
$ run-p clean:*
$ rimraf dist
$ rimraf dist-firefox-v2

VITE v4.3.9 ready in 878 ms

➜ Local: http://localhost:3573/
➜ Network: use --host to expose
➜ press h to show help
E:\Cex\browser-extension-react-typescript-starter\node_modules@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\utils.js:16
const error = new Error(Path contains invalid characters: ${pth})
^

Error: Path contains invalid characters: E:/Cex/browser-extension-react-typescript-starter/src/E:\Cex\browser-extension-react-typescript-starter\dist/content
at checkPath (E:\Cex\browser-extension-react-typescript-starter\node_modules@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\utils.js:16:21)
at module.exports.makeDir (E:\Cex\browser-extension-react-typescript-starter\node_modules@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\make-dir.js:12:3)
at Object. (E:\Cex\browser-extension-react-typescript-starter\node_modules\universalify\index.js:22:13)
at E:\Cex\browser-extension-react-typescript-starter\node_modules@crxjs\vite-plugin\node_modules\fs-extra\lib\output-file\index.js:20:11
at E:\Cex\browser-extension-react-typescript-starter\node_modules\universalify\index.js:22:54 {
code: 'EINVAL'
}

Node.js v20.6.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment Information

• Operating System: Windows 10
• Node.js Version: v20.6.1
• Yarn Version: 1.22.22
• Vite Version: 4.3.9

Additional Information

I have tried running the command prompt with administrator privileges, but the issue persists. It seems that there is a mix of forward slashes (/) and backslashes (\) in the file path, which might be causing the issue.

Any guidance or solutions would be greatly appreciated.