Chrome Extension
•Download as PPTX, PDF•
0 likes•381 views
The document discusses developing Chrome extensions, including what extensions are, common extension types like background scripts and content scripts, and Yieldbot's extension development cycle. It provides examples of extension code for a boiler plate browser action extension, using background scripts, content scripts, dev tools, page actions, and context menus. Useful links are also included for the Chrome extensions developer documentation and Yieldbot careers.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Chrome Extension
Similar to Chrome Extension (20)
Recently uploaded
Recently uploaded (20)
Chrome Extension
- 1. Developing Chrome Extensions Metrowest Web Developers Meetup By: Andrei McMillan Yieldbot
- 2. Agenda ● What is an extension? ● Types of extensions ● Development / Testing ● Deploying ● Yieldbot’s extension dev cycle ● Q & A
- 3. What is an Extension? Small downloadable plugins that allow you to add new functionality to the Chrome browser.
- 4. Types of Extensions ● Background Script ● Content Script ● Dev Tools ● Page Action ● Browser Action ● Context Menu
- 5. Boiler Plate (browser action) Displays current tab information chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { document.getElementById('data').innerHTML = JSON.stringify(tabs[0], null, 2); }); <body> <h4>Boiler Plate Extension</h4> <div>Tab Info</div> <pre id="data"></pre> <script src="index.js"></script> </body> browser_action.html browser_action.js
- 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
- 13. Useful Links ● https://developer.chrome.com/extensions/overview ● https://developer.chrome.com/extensions/manifest ● https://developer.chrome.com/extensions/devtools ● https://developer.chrome.com/extensions/api_index#stable_apis ● https://developer.chrome.com/webstore/using_webstore_api ● https://developer.chrome.com/apps/about_apps ● https://chrome.google.com/webstore/developer/dashboard
Editor's Notes
- allows you to perform action against the current page