7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/panel-boilerplate-messaging/scripts/messageback-script.js:
--------------------------------------------------------------------------------
1 | // document.querySelector('button').addEventListener('click', function() {
2 | // chrome.extension.sendMessage({action: 'message', content:"Changed by page"}, function(message){});
3 | // });
4 | document.querySelector('button').addEventListener('click', function() {
5 | sendObjectToDevTools({content: "Changed by page"});
6 | });
7 | function sendObjectToDevTools(message) {
8 | // The callback here can be used to execute something on receipt
9 | chrome.extension.sendMessage(message, function(message){});
10 | }
--------------------------------------------------------------------------------
/panel-boilerplate-messaging/scripts/panel.js:
--------------------------------------------------------------------------------
1 | // This one acts in the context of the panel in the Dev Tools
2 | //
3 | // Can use
4 | // chrome.devtools.*
5 | // chrome.extension.*
6 |
7 | document.querySelector('#executescript').addEventListener('click', function() {
8 | sendObjectToInspectedPage({action: "code", content: "console.log('Inline script executed')"});
9 | }, false);
10 |
11 | document.querySelector('#insertscript').addEventListener('click', function() {
12 | sendObjectToInspectedPage({action: "script", content: "scripts/inserted-script.js"});
13 | }, false);
14 |
15 | document.querySelector('#insertmessagebutton').addEventListener('click', function() {
16 | sendObjectToInspectedPage({action: "code", content: "document.body.innerHTML=''"});
17 | sendObjectToInspectedPage({action: "script", content: "scripts/messageback-script.js"});
18 | }, false);
--------------------------------------------------------------------------------
/panel-boilerplate-messaging/scripts/messaging.js:
--------------------------------------------------------------------------------
1 | // This creates and maintains the communication channel between
2 | // the inspectedPage and the dev tools panel.
3 | //
4 | // In this example, messages are JSON objects
5 | // {
6 | // action: ['code'|'script'|'message'], // What action to perform on the inspected page
7 | // content: [String|Path to script|Object], // data to be passed through
8 | // tabId: [Automatically added]
9 | // }
10 |
11 | (function createChannel() {
12 | //Create a port with background page for continous message communication
13 | var port = chrome.extension.connect({
14 | name: "Sample Communication" //Given a Name
15 | });
16 |
17 | // Listen to messages from the background page
18 | port.onMessage.addListener(function (message) {
19 | document.querySelector('#insertmessagebutton').innerHTML = message.content;
20 | // port.postMessage(message);
21 | });
22 |
23 | }());
24 |
25 | // This sends an object to the background page
26 | // where it can be relayed to the inspected page
27 | function sendObjectToInspectedPage(message) {
28 | message.tabId = chrome.devtools.inspectedWindow.tabId;
29 | chrome.extension.sendMessage(message);
30 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | DevTools Extension Boilerplates (WIP)
2 | ==============
3 |
4 | A starting point for developing Chrome DevTools Extensions.
5 |
6 | ## Listing
7 |
8 | ### sidebar-boilerplate
9 |
10 | A boilerplate for sidebar extensions
11 |
12 | 
13 |
14 | ### panel-boilerplate
15 |
16 | A boilerplate for full panel based extensions ~ currently displays panel (see -messaging variant for WIP of message passing)
17 |
18 | 
19 |
20 | ## Installation
21 |
22 | * Open [chrome://extensions](chrome://extensions)
23 | * Enable 'Developer Mode' checkbox
24 | * Click 'Load unpacked extensions...'
25 |
26 | ## Reference
27 |
28 | * https://github.com/thingsinjars/devtools-extension
29 | * http://thingsinjars.com/post/480/chrome-devtools-extension-starter-kit/
30 | * http://smus.com/extending-chrome-developer-tools/
31 | * http://developer.chrome.com/extensions/devguide.html
32 | * https://developer.chrome.com/extensions/samples.html#devtools
33 | * http://www.raymondcamden.com/index.cfm/2012/7/15/How-to-add-a-panel-to-Chrome-Dev-Tools
34 | * http://blog.chromium.org/2011/10/new-developer-tools-experimental-apis.html
35 | * http://stackoverflow.com/questions/11431337/sending-message-to-chrome-extension-from-a-web-page
36 | * http://stackoverflow.com/questions/12141759/how-custom-devtools-elements-sidebar-pane-can-communicate-to-panel
37 | * http://www.adambarth.com/experimental/crx/docs/experimental.devtools.panels.html
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2013, GoogleChrome
2 | All rights reserved.
3 |
4 | Redistribution and use in source and binary forms, with or without modification,
5 | are permitted provided that the following conditions are met:
6 |
7 | Redistributions of source code must retain the above copyright notice, this
8 | list of conditions and the following disclaimer.
9 |
10 | Redistributions in binary form must reproduce the above copyright notice, this
11 | list of conditions and the following disclaimer in the documentation and/or
12 | other materials provided with the distribution.
13 |
14 | Neither the name of the {organization} nor the names of its
15 | contributors may be used to endorse or promote products derived from
16 | this software without specific prior written permission.
17 |
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
19 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
22 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
25 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
27 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 |
--------------------------------------------------------------------------------
/panel-boilerplate-messaging/scripts/background.js:
--------------------------------------------------------------------------------
1 | // Chrome automatically creates a background.html page for this to execute.
2 | // This can access the inspected page via executeScript
3 | //
4 | // Can use:
5 | // chrome.tabs.*
6 | // chrome.extension.*
7 |
8 | chrome.extension.onConnect.addListener(function (port) {
9 |
10 | var extensionListener = function (message, sender, sendResponse) {
11 |
12 | if(message.tabId && message.content) {
13 |
14 | //Evaluate script in inspectedPage
15 | if(message.action === 'code') {
16 | chrome.tabs.executeScript(message.tabId, {code: message.content});
17 |
18 | //Attach script to inspectedPage
19 | } else if(message.action === 'script') {
20 | chrome.tabs.executeScript(message.tabId, {file: message.content});
21 |
22 | //Pass message to inspectedPage
23 | } else {
24 | chrome.tabs.sendMessage(message.tabId, message, sendResponse);
25 | }
26 |
27 | // This accepts messages from the inspectedPage and
28 | // sends them to the panel
29 | } else {
30 | port.postMessage(message);
31 | }
32 | sendResponse(message);
33 | }
34 |
35 | // Listens to messages sent from the panel
36 | chrome.extension.onMessage.addListener(extensionListener);
37 |
38 | port.onDisconnect.addListener(function(port) {
39 | chrome.extension.onMessage.removeListener(extensionListener);
40 | });
41 |
42 | // port.onMessage.addListener(function (message) {
43 | // port.postMessage(message);
44 | // });
45 |
46 | });
47 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
48 | return true;
49 | });
--------------------------------------------------------------------------------