Your First Steps with WebExtensions

Cyber Security

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 😉

A few handy hyperlinks


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.