Presented by Philippe Arteau
manifest.json
Non-technical reasons
Technical reasons
Return on investment will differ if you have 1 user or 100+ users.
Code available at: https://github.com/h3xstream/confoo-first-chrome-ext
https://github.com/h3xstream/confoo-first-chrome-ext
{ "name": "Acronym Finder", "description": "Simple acronym extension", "version": "1.0", "manifest_version": 3, "permissions": ["storage", "activeTab", "scripting","contextMenus"], "host_permissions": [ "*://*/*" ], //[...] }
A event-based script that the browser runs in the background. Chrome Developers Doc.
Components communicate with messages.
Sending a message
const urlParameters = new URLSearchParams(queryParameters); chrome.tabs.sendMessage(tabId, { type: "NEW", videoId: urlParameters.get("v"), });
{ //[...] "background": { "service_worker": "background.js" }, //[...] }
Script loaded in the context of the tab.
Context menu with option to extract the text selected.
{ //[...] "action": { "default_popup": "popup.html", "default_icon": {...} }, //[...] }
popup.js implementation
popup.js
As an alternative to Content Script, you can inject a script to a tab.
You can get the full URL to a resource using:
chrome.runtime.getURL("search.html")
Using a relative path from the popup will also work:
<a href="./settings.html">Settings</a>
[..] bundle JavaScript files for usage in a browser.
module.exports = { //... resolve: { fallback: { assert: require.resolve('assert'), buffer: require.resolve('buffer'), console: require.resolve('console-browserify'), constants: require.resolve('constants-browserify'), crypto: require.resolve('crypto-browserify'), domain: require.resolve('domain-browser'), events: require.resolve('events'), //...
More info: Webpack configuration: resolve fallback
Twitter @h3xstream
Website https://blog.h3xstream.com
Slides and code : https://github.com/h3xstream/confoo-first-chrome-ext
Refer to the demonstration for each handler
Fallbacks are a way to reuse code built with builtin NodeJS dependencies
This is a test