https://github.com/logisticinfotech/create-browser-extension-in-javascript

Create browser extension in javascript
https://github.com/logisticinfotech/create-browser-extension-in-javascript

browser-extension chrome-extension extension firebase firefox-extension javascript javascript-browser-extension javascript-demo personal-notes

Last synced: 22 days ago
JSON representation

Create browser extension in javascript

• Host: GitHub
• URL: https://github.com/logisticinfotech/create-browser-extension-in-javascript
• Owner: logisticinfotech
• Created: 2019-03-23T11:27:54.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-16T14:36:23.000Z (over 5 years ago)
• Last Synced: 2024-11-08T22:22:19.616Z (3 months ago)
• Topics: browser-extension, chrome-extension, extension, firebase, firefox-extension, javascript, javascript-browser-extension, javascript-demo, personal-notes
• Language: JavaScript
• Homepage: https://www.logisticinfotech.com/blog/how-to-create-browser-extension/
• Size: 271 KB
• Stars: 1
• Watchers: 6
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Browser Extension 

Please check [this](https://www.logisticinfotech.com/blog/how-to-create-browser-extension/) article for step by step guide. 

## How to create browser extension?

- **What is Browser extension?**

An extension is a  mini software tool for modifying a web browser. 

many extensions are available, including user interface,modification,add blocking and screenshot.

- **How can we make extension?**

it is easy to create your own extension.We need to required manifest.json file and other html,script,css and required image or icon.

**You must create manifest.json file in root directory**

```

{

  "manifest_version": 2,

  "name": "Personal Note",

  "description": "its simple to save note.",

  "version": "1.0",

  "auther":"Ramesh Vaniya",

  "icons": {

    "64": "icons/icon64x64.png"

  },

  "browser_action": {

    "default_icon": "icons/icon64x64.png",

    "default_popup": "popup.html"

  },

  "background": {

    "page": "background.html"

  },

  "permissions": [

    "identity"

  ],

  "content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",

  "oauth2": {

    "client_id": "client.apps.googleusercontent.com",

    "scopes": [

      "https://www.googleapis.com/auth/userinfo.email",

      "https://www.googleapis.com/auth/userinfo.profile"

    ]

  },

  "key":"google chrome extension public key"

}

```

## Upload extension in your local browser (Google chrome)

- Please follow below image for open extension list.



- You need to allow development mode in google chrome.



## Upload extension in your local browser (Firefox)

- Please follow below image for open extension list.



- **Installed extension**



[You can get our extension from firefox store](https://addons.mozilla.org/en-US/firefox/addon/personal-note)

[You can get our extension from google chrome store](https://chrome.google.com/webstore/detail/bbcencfbimebbbmlpaokmndbegmecghd)



[You can check full detail about it. you can open our blog](https://www.logisticinfotech.com/blog/how-to-create-browser-extension/).