felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Hellosct1 webext (#237)

Browse Source 
* 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
This commit is contained in:
hellosct1
2017-07-28 00:11:16 +02:00
committed by wbamberg
parent f4e470509a
commit b488b5b905
8 changed files with 193 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
devtools-panels/README.md Normal file
View File

@@ -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.

23
devtools-panels/background_scripts/background.js Normal file
View File

@@ -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);

9
devtools-panels/devtools/devtools-page.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="devtools.js"></script>
</body>
</html>

24
devtools-panels/devtools/devtools.js Normal file
View File

@@ -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);
});

72
devtools-panels/devtools/panel/devtools-panel.js Normal file
View File

@@ -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
});
});

14
devtools-panels/devtools/panel/panel.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button id="button_h1">Inspect h1</button>
<button id="button_background">Reddinate inspected element</button>
<button id="button_jquery">Check for jquery</button>
<button id="button_message">Inject content script</button>
<script src="devtools-panel.js"></script>
</body>
</html>

BIN
devtools-panels/icons/star.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

22
devtools-panels/manifest.json Normal file
View File

@@ -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": [
"<all_urls>"
],
"devtools_page": "devtools/devtools-page.html"
}