Send free fax via faxplus chrome addon:

https://chrome.google.com/webstore/detail/faxplus-receive-send-fax/dhbnflghagkonoikejjbjinpbdcjjlbo

#fax #faxplus #chrome #addon

How to create a simple Chrome extension?

First of all you need to enable developer mode in Chrome in order to debug your extension before publishing. Head over to chrome:// extensions in your browser, or simply click “More Tools” and “Extensions” on the Chrome menu. This should lead you to the Extension Management page, where you can turn on Developer Mode (it should be in the top right corner).

OK! Create a directory and put a file called manifest.json into it with the below content:

{
    "name": "Name of the extension",
    "description": "Description of the extension",
    "version": "1.0",
    "background": {
       "scripts": [ "background.js" ]
    },
    "browser_action": {
       "default_icon": "icon.png",
       "default_title": "Your Extension Title"
    },
    "icons": {
       "128": "icon_128.png"
    },
    "manifest_version": 2,
    "permissions": ["activeTab", "tabs", "contextMenus"]
 }

background section is used to link a javascript file to your extension (You need to create a file background.js in your newly created directory).

permissions section is used when you want specific permissions in your js file. contextMenus is used to work on menu items related to your extension. tabs is used to open a new tab on chrome browser.

In the next post I will explain the JS section.

#chrome #extension

Now let's write the main JS code in order to add menu items into Chrome extension. Create background.js file in the same directory as manifest.json with the content below:

if (chrome && chrome.browserAction){
     var baseUrl = "https://www.example.com"
     chrome.runtime.onInstalled.addListener(function() {
         chrome.tabs.create({ url: baseUrl + "/extension-installed/" });
     });

     chrome.runtime.setUninstallURL(baseUrl + "/extension-uninstalled/");

     // open a new page on left clicking on the extension itself
     chrome.browserAction.onClicked.addListener(function(activeTab) {
         chrome.tabs.create({ url: baseUrl + "/my-home-page" });
     });

     chrome.contextMenus.create({
         "id": "first_item",
         "title": "This is the first item",
         "contexts": ["browser_action"]
     });

     chrome.contextMenus.create({
         "id": "second_item",
         "title": "This is the second item",
         "contexts": ["browser_action"]
     });

     chrome.contextMenus.onClicked.addListener(function(info)
     {
         urls = {
             first_item: baseUrl + "/first-item",
             second_item: baseUrl + "/second-item"
         };
         chrome.tabs.create({url: urls[info.menuItemId]});
     });
 }

There are many events that based on that event you can do an action. Let's review some of the codes above.

chrome.runtime.onInstalled.addListener: on extension installation open a url using chrome.tabs. As you recall from the previous post we have added tabs to the permission section of manifest.

chrome.runtime.setUninstallURL: open a url on extension uninstallation.

chrome.browserAction.onClicked.addListener: open a url when your extension in toolbar is clicked (at the right of the address bar).

chrome.contextMenus.create: create an item with specific id and title. contexts sections tells the browser to show the menu just when user right click on the extension in toolbar. You can add page to have the extension menu item on the main page of browser itself.

chrome.contextMenus.onClicked.addListener: When one of the menu items is clicked open the corresponding URL.

Now to test it go to chrome://extensions/. Make sure developer mode is enabled. Click on Load unpacked and select your extension folder and open it. It will be installed by now.

Enjoy working with Chrome Extension! :)

#chrome #xtension