about syllabus All example source code
You can then execute that function like so:
And if you put that whole anonymous function in parentheses and then add parentheses after it, it’s a “self-executing” function. Meaning it’s called the moment it’s defined.
And that is what a bookmarklet is! Here, try dragging this one to you bookmarks bar.
a href element with
If your code is complicated and long it’s often simpler to just put it in another JS file and reference it like so:
The advantage of this solution is that is also makes it possible to update the bookmarklet without user’s having to re-add it. There is the problem of browser caching, however, which can usually be addressed with adding a random number or timestamp to the url.
(Note you can get fancier with the above if you want to cache hourly, daily, etc.)
All chrome extensions require a
Here is an example:
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: