All chrome extensions require a
Here is an example:
The manifest_version should always be 2 as this is the current manifest specification. Here is the full spec for manifest.json.
You also need to specify which URLs the content script should run on. For example for all URLs, you would add:
You can also specify individual unique URLs and using the wildcard
* to encompass all paths on a given domain. For example, the following would run the content script on any github.com page:
By default, Chrome runs the code in the content scripts after the DOM is completely loaded. So there’s no need wrap the code inside a “ready” event.
This is all you need for a working chrome extension! To test the extension, go to the browser’s extension page via
chrome://extensions/. Check “Developer mode” and then “Load unpacked extension”. Browse to the directory where you’ve stored your
Once the extension is installed you can enable or disable it, as well as delete it. Also note that if you change the code you’ll need to select “reload” before the new code will run.
User interface elements can be added as part of chrome extension via “browser” or “page” actions. A browser action creates a button that lives on the top right of the browser. A page action is an icon that appears in the address bar itself.
When the user clicks the button, it triggers an “onClick” event. This code would go in
And then in the content script you can receive the message and perform an action. Lots of data comes in with the message, but the actual object you sent is in the
The browser action can also trigger a pop-up, which is just an HTML page. For example, you could run a p5 sketch in the pop-up as in this example. To do this, reference the pop-up HTML file in
word, you would say:
Actions can also be triggered by typing a keyword into the “omnibox” (also known as “address bar”). The keyword is specified in
What to do after the user types a2z is handled in the background script.
Chrome extensions allow you to replace the default chrome pages for bookmarks, history, and new tab. To replace new tab, for example, add the following to manifest.json.
Then you can create
One of the benefits of using a chrome extension is all of the APIs that are available for controlling the behavior of the browser. Some that might interest you are: