Blog.

STALK.IO chrome extension

Oct 6, 2014

Hello. XPUSH We are xpush development team.

Stalk.io is a chatting widget service based on XPUSH that you can easily install on your web page.

Thus, apart from the operator or administrator to install manually, You can also use stalk.io chrome extension which can talk to each other viewing the same page in your web page.

##About Chrome Extensions?##

Chrome extension is a HTML + JavaScript-based Web applications can be added to the Chrome browser (extension)

It is available for installation in the Chrome Web Store, you can use your web environment faster and more powerful.

The types of chrome app that can be installed in the Chrome Web Store, Chrome Extensionsand Packaged App, Hosted App

If you are contemplating to choose what type of App, you can find a clue in Choosing an App Type.

##Extension UI##

Extension UI is run through an icon in the toolbar of the right of the address bar. Typical Components of Extension UI : popup, browser action, page action.

##Extension Components##

1.background page

It is composed in HTML and JavaScript files, and is responsible for the main logic of the extension. It will interact with other pages such as Pop-up or contents script in extension.

You can also define a listener of events that occur in the browser action or page action Is not exposed to the browser, it will be run from the background) as a separate process.

2.Popup page

For information on the page that appears when you click on the extension icon, using the flickr API Chrome extension Get Started can be easily understood as an example of a page.

It is possible to interact with background pages.

3.Content Script

As the script that is inserted into the web page, it is also possible to interact with background pages.

##stalk.io chrome extension##

stalk.io chrome extensionwas developed by the browser action and background page.

manifest.json


  "browser_action": {
    "default_icon": "images/stalk_16.png"
  },
  "background": {
        "scripts": ["background.js"]
  },

background.js


  	chrome.browserAction.onClicked.addListener(
	    function(tab) { 
	        chrome.tabs.executeScript(null, { // defaults to the current tab
	            file: "main.js", // script to inject into page and run in sandbox
	            allFrames: false // This injects script into iframes in the page and doesn't work before 4.0.266.0.
	        });
	    }
	);

When you click the icon stalk.io, the event named browswerAction is occured, through the chrome.tabs.executeScript main.js file is executed.

When you click the icon stalk.io, the event named browswerAction is occured, main.js file is executed through the chrome.tabs.executeScript.

The code included in this main.js file contains code that injects the stalk.js and executes STALK.init().

Please check complete source through the XPUSH github.

SHARE:
comments powered by Disqus

Categories

announcement 3

Programming 2

Popular Tags

xpush fontawesome

About

XPUSH is an opensource realtime communication platform for quickly, easily adding scalable functionality to web and mobile environment.
It lets you develop faster, deploy easier and scale bigger.

Source Link

- Opensource Project from github

Code licensed under MIT License
Documentation licensed under CC BY 3.0