Browser-extension

Sources: chrome, codedamn, codeevolution, GoogleGroups, samples:contextmenus

Examples : github

#Chrome-Browser extension (Steps to create "hello world"):

1. Create a folder of your choice & create/add following files into it.

    mkdir helloworldExt & mkdir helloworldExt/js helloworldExt/css

    touch manifest.json popup.html js/popup.js

2.a. Edit manifest file to define name, description, version, manifest-version, browser-action...

  "name" : "Chrome extension 1-GSDC",

 "description" : "Copies data from one sheet to other by submittimg forms.",

 "version" : "1.0",

 "manifest_version" : 2 ,

 "browser_action" : {

  "default_popup" : "popup.html",

  "default_icon" : "icons8-spider-40.png"

2.b. Download icon of your choice. I used icons8-spider-40.png(spider icon of size 40) from icons8 .

2.c. Edit popup.html..

<!DOCTYPE html>

<html>

<head>

  <title>GSDC</title>

 <link rel="stylesheet" href="css/bootstrap.min.css">

 <!--

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

-->

</head>

<body style="width: 250px; margin: 5px; margin-top: 10px; margin-bottom: 10px;">

 <label for = "message">Message goes here: </label><input type="text" name="message" id="message" class = "form-control"><br/><br/>

 <input type="button" value="Show alert" id="alertMessage" class="btn btn-secondary" style="width: 100%">

  <!--SCRIPTS AT LAST-->

 <script src="js/jquery.min.js"></script>

 <script src="js/popper.min.js"></script>

 <script src="js/bootstrap.min.js"></script>

 <script src="js/popup.js"></script>

</body>

</html>

2.d. Download Bootstrap's dependent js and css files to extension's js and css folders respectively(links mentioned in comment of popup.html, were taken from w3schools).

2.e. Edit popup.js and add ..

document.getElementById("alertMessage").addEventListener("click", showAlert);

function showAlert(e){

  alert(document.getElementById("message"));

 }));

3. Navigate to chrome://extensions in chrome browser.

4. Enable developer mode if not enabled.

5. Load local unzipped extension. if no error occurs, extension icon will appear on right top(this can be altered later.)

6. Click on extension, Type some message and click on button, alert should appear. Hurraaahhh you have just created a hello world example of Chrome Extension.. for more please refer my git.

#How to store data? This require "storage" as permissions in manifest.json.

chrome.storage.local.set({"Key1":"Value"});

chrome.storage.local.get(["Key1", "Key2"], function(obj){

    if(obj.Key1){

        console.log(obj.Key1);

});

chrome.storage.local.getBytesInUse(["key1"], function(obj){console.log(obj);});

chrome.storage.local.remove(["key1", "keyn"]);

#Notifications? This require "notifications" as permissions in manifest.json.

var notifivationJSON = {type:"basic', iconUrl:"icon.png", title:"Alert", message:"Notification Message."};

chrome.notifications.create("notificationName", notificationJSON);

#Options? for extension configuration and initial inputs. Add following to manifest.json.

options:"option.html" <!--Rest we can add js file in html and do any thing with that.-->

#Communication within various part/scripts of extension using messaging API.

1.Content script-It allows manipulation of DOM.

2.Option-script-UI that can be used for initial configuration.

3.Page & browser scripts- Allows giving face to extension that is visible on extension icon click event.

4.Background script- It allows usage of complete chrome api and runs in background.

1-3:can use below to send message to back ground script.

    chrome.runtime.sendMessage({todo: "fetchNext"}, function(response){

        if(response){

            record = response.obj;

1-4: can subscribe to message and respond accordingly.

    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){

        if(request.todo == "showPopup"){

            //Do something here.

            resp={};//any object that we want to send as response of message.

            sendResponse({obj:resp});

        }else if(request.todo == "fetchNext"){

            //Do another thing here.

4: can use below to send message to 1/3:

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

        chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {

            console.log(response.farewell);

});

});

#Check for outgoing ajax calls for my application.

manifest.json

    "permissions":["webRequest", "*://*"]

in any script(content/background/popup) add listener as follows:

chrome.webRequest.onBeforeRequest.addListener( function(details) { return {cancel: details.url.indexOf("://www.evil.com/") != -1}; }, {urls: ["<all_urls>"]}, ["blocking"]);

Problem-1:'fileBrowserHandler' is not allowed for specified platform. https://developer.chrome.com/extensions/fileBrowserHandler

How do i call a function on click?

How to debug?

Google Sites

Report abuse