How to use Browser APIs in the latest extension framework

[ApacheAlpha]

Execution steps

Step 1

Create a template project using the command npx extension@latest create Chrome-Extension-Template-v1 --template=content-react

Step 2

Check the extension: Service Worker and find that the log can be output normally

Step 3 Add the code to the background.ts file and save it.

chrome.action.onClicked.addListener((tab) => { console.log("Extension icon clicked!"); });

Step 4

It actually prompted an error

Through testing, it was found that

npx extension@latest create Chrome-Extension-Template-v2 --template=content-tailwind

npx extension@latest create Chrome-Extension-Template-v1 --template=sidebar

The browser API cannot be used normally in the above two templates

IMHO, the templates including background.js or background.ts are too simple. There is only one log output in the background.js or background.ts file. There is no operation of the browser API. I hope your template code can be more comprehensive and give some simple examples of browser API operation.

If I have any questions, please let me know, thank you

[ApacheAlpha]

@cezaraugusto

[cezaraugusto]

hey @ApacheAlpha did you close because you managed to fix it? this is usually due to lack of permissions in the manifest.json. if you believe it's an issue pls reopen.

[ApacheAlpha]

@cezaraugusto Yes, I fixed this issue. It was indeed the lack of relevant permissions in the manifest.json file.

I have a small suggestion: when creating a project using the extension framework, automatically add the "action": {} configuration to the manifest.json file, which can solve this problem.

Because most browser extensions use browser API operations

Thanks for your reply, thank you