Extending the web one line of Javascript at a time
Live demo! Nothing can possibly go wrong!
(if the demo gods allowed it)
Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS
Little / No Interface
Development: just put them in a folder
Distribution: zip them up with .crx extension
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": { "128": "icon_128.png" },
"background": {
"persistent": false,
"scripts": ["bg.js"]
},
"permissions": ["http://*.google.com/", "https://*.google.com/"],
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png",
"default_popup": "popup.html"
}
}
Example Scenario:
// popup.js
function main(){ console.log("Main"); };
function clickHandler(){ console.log("You are awesome"); };
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', clickHandler);
main();
});
<!-- popup.html - CSP problems -->
<script>
function main(){ console.log("Main"); };
function clickHandler(){ console.log("You are awesome"); };
</script>
<body onload="main();">
<button onclick="clickHandler(this)">Click for awesomeness!</button>
</body>
<!-- popup.html - Fixed for CSP -->
<script src="popup.js"></script>
<body>
<button>Click for awesomeness!</button>
</body>
chrome.tabs.create(object createProperties, function callback)
string chrome.runtime.getURL()
function saveTabData(tab, data) {
if (tab.incognito) {
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage[tab.url] = data; // Persist data ONLY in memory
});
} else {
localStorage[tab.url] = data; // OK to store data
}
}