We’ll program an extension for Chrome and Firefox.
- Create a folder and name it e.g. mywebex and a subfolder icons
- Save an icon named icon-48.png to the subfolder (48×48 pixels, png)
- Open Chrome and press Ctrl+Shift+I to open the builtin editor
- +Add folder to workspace (your folder) and allow the access
- Create a new file called manifest.json in your folder. Add code:
{
"description": "What ever ;-)",
"manifest_version": 2,
"name": "MyWebEx",
"version": "0.1",
"homepage_url": "https://b76.ch/about/",
"icons": {
"48": "icons/icon-48.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"contextMenus"
]
}
- Create another new file called background.js in your folder. Add code:
chrome.contextMenus.create({
id: "mywebex",
title: "MyWebEx",
contexts: ["selection"]
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId == "mywebex") {
console.log(info.selectionText);
chrome.tabs.create({
url: 'https://b76.ch/?s=' + info.selectionText
});
};
});
Use the extension with Firefox
- Open about:debugging > This Firefox > Load Temporary Add-on
- Navigate to your folder double click manifest.json to load the add-on
- Open any webpage, select a word, rigth click and choose MyWebEx 😉
Use the extension with Chrome
- Open chrome://extensions and activate on Developer mode
- Click on the button Load Unpacked and open your folder
- Open any webpage, select a word, rigth click and choose MyWebEx 😉