This is the code for an example extension that I used in my blog post.
Please note that since it showcases a few different options, it's not runnable as-is. In background.js and extensionPage.js, you'd need to choose either Option 1, 2 or 3 and remove the others.
| /* Create and open extension page type of "panel" | |
| function openForm() { | |
| const createData = { | |
| type: "panel", | |
| url: "extensionPage.html", | |
| width: 250, | |
| height: 250 | |
| }; | |
| browser.windows.create(createData); | |
| } | |
| /* A dummy function where the main logic would go */ | |
| function mainLogic(token) { | |
| console.log(token); | |
| } | |
| /* When toolbar icon is clicked */ | |
| browser.browserAction.onClicked.addListener(async () => { | |
| const { token } = await browser.storage.local.get('token'); | |
| if(!token) { | |
| openForm(); | |
| } else { | |
| mainLogic(token); | |
| } | |
| }); | |
| /* | |
| * Option 1: listen to message from extensionPage, | |
| * then get the value from storage and send it to main function. | |
| */ | |
| browser.runtime.onMessage.addListener(message => { | |
| if(message.action === 'tokenSaved') { | |
| browser.storage.local.get('token').then(({token}) => { | |
| mainLogic(token); | |
| }); | |
| } | |
| }) | |
| /* END OF OPTION 1 */ | |
| /* | |
| * Option 2: listen to message from extensionPage | |
| * and use the token value received through it | |
| */ | |
| browser.runtime.onMessage.addListener(message => { | |
| if(message.action === 'tokenSaved') { | |
| mainLogic(message.token); | |
| } | |
| }); | |
| /* END OF OPTION 2 */ | |
| /* | |
| * Option 3: listen to changes in storage | |
| */ | |
| browser.storage.local.onChanged.addListener(changes => { | |
| if('token' in changes) { | |
| mainLogic(changes.token.newValue); | |
| } | |
| }); | |
| /* END OF OPTION 3 */ |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <form> | |
| <label for="token">Token: <input type="text" id="token" /></label> | |
| <button type="submit">Save</button> | |
| </form> | |
| <script src="extensionPage.js"></script> | |
| </body> | |
| </html> |
| /* When the form is submitted */ | |
| document.querySelector('form').addEventListener('submit', async (ev) => { | |
| ev.preventDefault() | |
| const token = document.querySelector('#token').value; | |
| /* Store into storage */ | |
| await browser.storage.local.set({token}); | |
| /* OPTION 1: */ | |
| browser.runtime.sendMessage({ | |
| action: 'tokenSaved' | |
| }); | |
| /* END OF OPTION 1 */ | |
| /* OPTION 2: */ | |
| browser.runtime.sendMessage({ | |
| action: 'tokenSaved', | |
| token | |
| }); | |
| /* END OF OPTION 2 */ | |
| /* OPTION 3: */ | |
| // Nothing here, no need to send message from here | |
| /* END OF OPTION 3 */ | |
| /* Close the panel on each case after submit */ | |
| let currentWindow = browser.windows.WINDOW_ID_CURRENT; | |
| browser.windows.remove(currentWindow); | |
| }) |
| { | |
| "name": "Token-Form-Example", | |
| "description": "Example for how to wait for user to provide a token if one does not exist in storage.", | |
| "version": "1.0.0", | |
| "manifest_version": 2, | |
| "browser_action": { | |
| "default_icon": "icon.png", | |
| "default_title": "Open token form" | |
| }, | |
| "background": { | |
| "scripts": ["background.js"] | |
| }, | |
| "permissions": ["storage", "https://example.com/*"] | |
| } |
