From b488b5b9053bb5bcb4f4c0c9cc5ed305fc4f58c2 Mon Sep 17 00:00:00 2001 From: hellosct1 Date: Fri, 28 Jul 2017 00:11:16 +0200 Subject: [PATCH] Hellosct1 webext (#237) * README.md 1st commit * New demo with devtools and the webextensions * evolution script example * Remove commented out code, to see if it triggers a Travis build * Updated README; added more descriptive labels for buttons * Added some comments * update evolution * correction * correction next * correction next * update script for jquery * update part jquery in the devtools * Remove jQuery check from handleResult --- devtools-panels/README.md | 29 +++++++ .../background_scripts/background.js | 23 ++++++ devtools-panels/devtools/devtools-page.html | 9 +++ devtools-panels/devtools/devtools.js | 24 ++++++ .../devtools/panel/devtools-panel.js | 72 ++++++++++++++++++ devtools-panels/devtools/panel/panel.html | 14 ++++ devtools-panels/icons/star.png | Bin 0 -> 1621 bytes devtools-panels/manifest.json | 22 ++++++ 8 files changed, 193 insertions(+) create mode 100644 devtools-panels/README.md create mode 100644 devtools-panels/background_scripts/background.js create mode 100644 devtools-panels/devtools/devtools-page.html create mode 100644 devtools-panels/devtools/devtools.js create mode 100644 devtools-panels/devtools/panel/devtools-panel.js create mode 100644 devtools-panels/devtools/panel/panel.html create mode 100644 devtools-panels/icons/star.png create mode 100644 devtools-panels/manifest.json diff --git a/devtools-panels/README.md b/devtools-panels/README.md new file mode 100644 index 0000000..2cbcc30 --- /dev/null +++ b/devtools-panels/README.md @@ -0,0 +1,29 @@ +# devtools-panels + +**Adds a new panel to the developer tools. The panel contains buttons that demonstrate various basic features of the devtools API.** + +## What it does ## + +This extension adds a new panel to the developer tools. The panel contains four buttons: + +* **Inspect H1**: this injects a script into the active page. The script uses the [`inspect()` helper function](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval#Helpers) to select the first <h1> element in the page in the devtools inspector. + +* **Reddinate inspected element**: this injects a script into the active page. The script uses the [`$0` helper](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval#Helpers) to get the element that's currently selected in the devtools Inspector, and gives it a red background. + +* **Check for jQuery**: this injects a script into the active page. The script checks whether `jQuery` is defined in the page, and logs a string to the add-on debugging console (note: *not* the web console) recording the result. + +* **Inject content script**: this sends a message to the extension's background script, asking it to inject a given content script in the active page. + +To learn more about the devtools APIs, see [Extending the developer tools](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Extending_the_developer_tools). + +## What it shows ## + +* How to add a new panel to the devtools. + +* How to inject a script into the active page using [`inspectedWindow.eval()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval). + +* How to use [helpers](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval#Helpers) to interact with the devtools. + +* That unlike content scripts, scripts injected with `eval()` can see objects, like `jQuery`, that were added by page scripts. + +* How to send messages to the background script. diff --git a/devtools-panels/background_scripts/background.js b/devtools-panels/background_scripts/background.js new file mode 100644 index 0000000..18297fe --- /dev/null +++ b/devtools-panels/background_scripts/background.js @@ -0,0 +1,23 @@ + +/** +When we receive the message, execute the given script in the given +tab. +*/ +function handleMessage(request, sender, sendResponse) { + + if (sender.url != browser.runtime.getURL("/devtools/panel/panel.html")) { + return; + } + + browser.tabs.executeScript( + request.tabId, + { + code: request.script + }); + +} + +/** +Listen for messages from our devtools panel. +*/ +browser.runtime.onMessage.addListener(handleMessage); diff --git a/devtools-panels/devtools/devtools-page.html b/devtools-panels/devtools/devtools-page.html new file mode 100644 index 0000000..807bd94 --- /dev/null +++ b/devtools-panels/devtools/devtools-page.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/devtools-panels/devtools/devtools.js b/devtools-panels/devtools/devtools.js new file mode 100644 index 0000000..ae6bf47 --- /dev/null +++ b/devtools-panels/devtools/devtools.js @@ -0,0 +1,24 @@ +/** +This script is run whenever the devtools are open. +In here, we can create our panel. +*/ + +function handleShown() { + console.log("panel is being shown"); +} + +function handleHidden() { + console.log("panel is being hidden"); +} + +/** +Create a panel, and add listeners for panel show/hide events. +*/ +browser.devtools.panels.create( + "My Panel", + "icons/star.png", + "devtools/panel/panel.html" +).then((newPanel) => { + newPanel.onShown.addListener(handleShown); + newPanel.onHidden.addListener(handleHidden); +}); diff --git a/devtools-panels/devtools/panel/devtools-panel.js b/devtools-panels/devtools/panel/devtools-panel.js new file mode 100644 index 0000000..daa2ecb --- /dev/null +++ b/devtools-panels/devtools/panel/devtools-panel.js @@ -0,0 +1,72 @@ +/** +Handle errors from the injected script. +Errors may come from evaluating the JavaScript itself +or from the devtools framework. +See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval#Return_value +*/ +function handleError(error) { + if (error.isError) { + console.log(`Devtools error: ${error.code}`); + } else { + console.log(`JavaScript error: ${error.value}`); + } +} + +/** +Handle the result of evaluating the script. +If there was an error, call handleError. +*/ +function handleResult(result) { + if (result[1]) { + handleError(result[1]); + } +} + +/** +Handle the result of evaluating the jQuery test script. +Log the result of the test, or +if there was an error, call handleError. +*/ +function handlejQueryResult(result) { + if (result[0] !== undefined) { + console.log(`jQuery: ${result[0]}`); + } else if (result[1]) { + handleError(result[1]); + } +} +/** +When the user clicks the 'jquery' button, +evaluate the jQuery script. +*/ +const checkjQuery = "typeof jQuery != 'undefined'"; +document.getElementById("button_jquery").addEventListener("click", () => { + browser.devtools.inspectedWindow.eval(checkjQuery) + .then(handlejQueryResult); +}); +/** +When the user clicks each of the first three buttons, +evaluate the corresponding script. +*/ +const evalString = "$0.style.backgroundColor = 'red'"; +document.getElementById("button_background").addEventListener("click", () => { + browser.devtools.inspectedWindow.eval(evalString) + .then(handleResult); +}); + +const inspectString = "inspect(document.querySelector('h1'))"; +document.getElementById("button_h1").addEventListener("click", function(){ + browser.devtools.inspectedWindow.eval(inspectString) + .then(handleResult); +}); + +/** +When the user clicks the 'message' button, +send a message to the background script. +*/ +const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';"; +document.getElementById("button_message").addEventListener("click", () => { + browser.runtime.sendMessage({ + tabId: browser.devtools.inspectedWindow.tabId, + script: scriptToAttach + }); +}); diff --git a/devtools-panels/devtools/panel/panel.html b/devtools-panels/devtools/panel/panel.html new file mode 100644 index 0000000..7d71f21 --- /dev/null +++ b/devtools-panels/devtools/panel/panel.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/devtools-panels/icons/star.png b/devtools-panels/icons/star.png new file mode 100644 index 0000000000000000000000000000000000000000..64c4e360c0544e84ab03f85c09732bdf8e8faf32 GIT binary patch literal 1621 zcmV-b2CDgqP)#9W zK~#9!)mlqW8&?$Ozhu!xHvJWBX5&>hX(hU8s+1~;)TpARq?M{lt&~(C1mY>cHg9Y& zHZkU912)+B1-7xV&BFqUEyZ=Ar7Vy*J>NvG2I{c~X8<$ORmgDX&iT$g=R4oILseB( z72Wfp-eQf7jnvfCbUy*~_4PgR`~8$mCh;@P&d&aJZvez&iN{8xk)$_AMnZ0pDglC3_hwJYgz{v0@ZEtT=IS*@Q?z50CjeD^1PMjHwu80uh!{w76lNG$I0XN(ER*7 zjJ9(PsG%YkjL$!dot>PVyg2~8^|Hpp5O~_MUx!p7>soK_dkyn188Y!`9|W2O90?GH2@%&II$6q z2c;&1D0+MQIHZoAmIPq8JL;rcySnP8n*e|T0G#X=r4I}Y3`o^&;d#Biy_dGs?+;Kq zo%ydAvFFTc0Z1kjl*weocPM#)>k&FWc>sk}CcMN1HiWnp{E-(b=m{iS{^I0Q4S?6*^kl9O{vz`86wWZw_l3P2V3tyEgNNer#AgQw2LdQi4FJ(-6mmj%@0i_B@PFw9gcS}Bxc2-a3t)PBS`h=F z;4o*~a=AYrph~I%07WsKP7C?`;@!BkwGffWKiNv$(9m$L1_c@@o6T0iQ)&Uo<#K{V zVmqaJXmD_-xR?Vqp(}z%l>*q`KX?jZrv?D*YBrlQOA95O10{hmvCMGSjR8q@$KJuf71k+{6Jln@WcBo{M| z2gj9V^#k0e)*__1yOIS0>f@$dokGSTi5e3K1nb=HRXxH6&3-r>`L^ta=HlYw5yTu0 zY2}_Q)xW~CpjzY>;v6}H5s9E%ix74jng(4Ny1P7OA_BPgs8gk-+}lfui4+V5sSp4d z@jl_gY+MYztY|Rqp{|JSWHb&i8U~}`4o(w~CpGMCkvy39FRhE#RU*{XX(`Xn&c1?t zg~8HafF+pnme^>4C5DhMMsgSD&F4HUg?eBNoMe=7Msz*ChRjAEoWIF=k}hU68~dr( z=e6Z~>SD}>)|GSX>l;1TIzB#r4tBsc;|AiHNBvd9xmmY!AFKHM6pn$YyS2kzmurPa zM@N~j=dmMt7|pcmWW%>h^|x1tWy(Sh`_kI>32nN?h*2$#by||Mv zG%UP6MuLM1%UJ+4jkBRU|4NxkrM?5*f*O@RgkohjPk!jT)%)CYdU{%qPfpkoC7+zo zU2%PQR51Xgr)_AwrF8qhlZBySii9?wRn(XID|Gu4&QGD|3mLz{ELL%UYEWoEu}Y8S zA=ek?7icpQt+^KfFfy6UYb316WFqTZD{KGlXDY6Ldw-bG+}vEw7nsTca1-NSow6$d TTuZTK00000NkvXXu0mjfk|6>u literal 0 HcmV?d00001 diff --git a/devtools-panels/manifest.json b/devtools-panels/manifest.json new file mode 100644 index 0000000..4723098 --- /dev/null +++ b/devtools-panels/manifest.json @@ -0,0 +1,22 @@ +{ + "description": "Adds a new panel to the developer tools. The panel contains buttons that demonstrate various basic features of the devtools API.", + "manifest_version": 2, + "name": "devtools-panels", + "version": "1.0", + "author": "Christophe Villeneuve", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/devtools-panels", + "icons": { + "48": "icons/star.png" + }, + + "background": { + "scripts": ["background_scripts/background.js"] + }, + + "permissions": [ + "" + ], + + "devtools_page": "devtools/devtools-page.html" + +}