Part1: Your first RTC Browser Plugin (without functionality)

A Chrome Browser Plugin has a lot of different files and also the correct configuration is very important. To avoid pitfalls you can use the Extensionizr. Within 15 seconds you will get a functional Chrome extension!

Overview

Before we start just an overview “what is what…”.

BrowserExtensionsOverview.jpg

Background Script/Page:

Background pages defined by background.html can include JavaScript code that controls the behaviour of the extension. A background page is a single page that is launched and run within its own context, no matter how many tabs or windows are open. They are useful for extensions where you want to have a process running that persists across all pages within Chrome.

An extension can have only one background page.

Browser Action:

Choose a browser action when the extension is relevant to most pages.

Content Script:

If your extension needs to interact with web pages, then it needs a content script. Content scripts execute in their own isolated context, but they can access the DOM of the page. Content scripts can also communicate with other pages in your extension using a special message passing API.

manifest.json:

Gives information about the extension

Page Action:

Choose a page action when the extension’s icon should be active or inactive (and grayed out), depending on the page.

Option Page:

You need a place to control the behavior of your extension, then you can use an option page.

More details could be found at:

 

Extensionizr

Go to the website Extensionizr and select the following options. Please keep in mind that the content script will have the name “Inject.js” and not “content.js”.

Extensionizr01.png

 

Load the extension

Follow these steps to install your extension.

  1. Type chrome://extensions into your Chrome Browser
  2. Ensure that the Developer mode is checked.
  3. Click Load unpacked extension and select the directory.

 

 

 

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: