6. Background Script
● a long lived script that runs in the
background
● only one instance of this script is active per
extension
7. Content Script
● js files that are executed in the context of the
user webpage
● direct access to the DOM
● no direct access to global variables
● multiple instances per extension (1 per tab)
8. Dev Tools
● allows interaction with the inspected page
● access to network resources
● multiple instances (1 per tab)
9. Page Action
chrome.pageAction.show(tabId);
background.js
// get the current active tab
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
// send message to the content_script to get the open graph info to the current tab
chrome.tabs.sendMessage(tabs[0].id, {option: 'page_og_data'}, function (response) {
console.log(response);
});
});
page_action.js
10. Browser Action
// event handler for form submission
$('#og-form').on('submit', function () {
var url = $('#url').val();
// make a request to the background script to get open graph data for the given url
chrome.runtime.sendMessage({option: 'og_data', url: url}, function (response) {
var table = createTable(response);
$('#result').html(table);
});
return false;
});
11. Context Menu
var contextMenuOptions = {
title: 'Chrome Extension',
contexts: ['selection'],
onclick: function (info, tab) {
chrome.tabs.sendMessage(tab.id, {value: info.selectionText}, ...);
}
};
chrome.contextMenus.create(contextMenuOptions, function () {});
12. Development / Testing / Deploying
Let’s See It In Action!
https://github.com/amcmillan01/chrome_extension
