Merge remote-tracking branch 'origin/master' into menu-update

* origin/master: change shortcut to Ctrl+Shift+U for commands example (#264) Update `proxy-blocker` extension to be compatible with firefox 56+ (#260) Update eslint and .travis.yml (#259) add in titlePreface (#256) Hellosct1 webext (#237) Remove 'highlight', as Firefox does not support it (#252) Reflect bookmark state in icon title to make it accessible to screen readers (#255)
2026-04-16 06:18:35 +02:00 · 2017-09-08 14:23:48 -07:00
parent 760b00f163 d7bf874833
commit 44650eb5ca
20 changed files with 219 additions and 23 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,3 @@
 language: node_js
-node_js:
-    - "8"
+node_js: stable
 sudo: false
-
-script:
-    - "npm test"
--- a/bookmark-it/background.js
+++ b/bookmark-it/background.js
@@ -16,6 +16,11 @@ function updateIcon() {
    },
    tabId: currentTab.id
  });
+  browser.browserAction.setTitle({
+    // Screen readers can see the title
+    title: currentBookmark ? 'Unbookmark it!' : 'Bookmark it!',
+    tabId: currentTab.id
+  }); 
 }

 /*
--- a/devtools-panels/README.md
+++ 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 &lt;h1&gt; 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.
--- a/devtools-panels/background_scripts/background.js
+++ 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); 
--- a/devtools-panels/devtools/devtools-page.html
+++ b/devtools-panels/devtools/devtools-page.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
--- a/devtools-panels/devtools/devtools.js
+++ 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);
+}); 
--- a/devtools-panels/devtools/panel/devtools-panel.js
+++ 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", () => {
+    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
+  });
+});
--- a/devtools-panels/devtools/panel/panel.html
+++ b/devtools-panels/devtools/panel/panel.html
@@ -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>
--- a/devtools-panels/icons/star.png
+++ b/devtools-panels/icons/star.png
--- a/devtools-panels/manifest.json
+++ 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": [
+      "<all_urls>"
+  ],
+  
+  "devtools_page": "devtools/devtools-page.html"
+
+}
--- a/examples.json
+++ b/examples.json
@@ -82,7 +82,7 @@
            "commands.onCommand"
        ],
        "name": "commands",
-        "description": "Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+Y (Command+Shift+Y on a Mac)."
+        "description": "Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+U (Command+Shift+U on a Mac)."
    },
    {
        "javascript_apis": [
@@ -315,7 +315,7 @@
        "javascript_apis": [
            "extension.getURL",
            "proxy.onProxyError",
-            "proxy.registerProxyScript",
+            "proxy.register",
            "runtime.onMessage",
            "runtime.sendMessage",
            "storage.local",
--- a/google-userinfo/background/authorize.js
+++ b/google-userinfo/background/authorize.js
@@ -12,7 +12,7 @@ const AUTH_URL =
 const VALIDATION_BASE_URL="https://www.googleapis.com/oauth2/v3/tokeninfo";

 function extractAccessToken(redirectUri) {
-  let m = redirectUri.match(/[#\?](.*)/);
+  let m = redirectUri.match(/[#?](.*)/);
  if (!m || m.length < 1)
    return null;
  let params = new URLSearchParams(m[1].split("#")[0]);
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "1.0.0",
  "description": "Example Firefox add-ons created using the WebExtensions API",
  "devDependencies": {
-    "eslint": "^3.19.0"
+    "eslint": "^4.4.1"
  },
  "repository": {
    "type": "git",
--- a/proxy-blocker/background/proxy-handler.js
+++ b/proxy-blocker/background/proxy-handler.js
@@ -7,7 +7,7 @@ const defaultSettings = {
 }

 // Register the proxy script
-browser.proxy.registerProxyScript(proxyScriptURL);
+browser.proxy.register(proxyScriptURL);

 // Log any errors from the proxy script
 browser.proxy.onProxyError.addListener(error => {
--- a/proxy-blocker/manifest.json
+++ b/proxy-blocker/manifest.json
@@ -12,7 +12,7 @@

  "applications": {
    "gecko": {
-      "strict_min_version": "55.0a1"
+      "strict_min_version": "56.0a1"
    }
  },

--- a/proxy-blocker/proxy/proxy-script.js
+++ b/proxy-blocker/proxy/proxy-script.js
@@ -1,7 +1,7 @@
 /* exported FindProxyForURL */

 var blockedHosts = [];
-const allow = "DIRECT 1234";
+const allow = "DIRECT";
 const deny = "PROXY 127.0.0.1:65535";

 // tell the background script that we are ready
--- a/tabs-tabs-tabs/tabs.html
+++ b/tabs-tabs-tabs/tabs.html
@@ -32,10 +32,6 @@
    <a href="#" id="tabs-default-zoom">Reset zoom</a><br>
    <a href="#" id="tabs-decrease-zoom">Zoom out</a><br>

-    <div class="panel-section-separator"></div>
-    
-    <a href="#" id="tabs-highlight">Highlight (only supported by Chrome)</a>
-
    <div class="panel-section-separator"></div>

    <div class="switch-tabs">
--- a/tabs-tabs-tabs/tabs.js
+++ b/tabs-tabs-tabs/tabs.js
@@ -160,13 +160,6 @@ document.addEventListener("click", (e) => {
      });
    });
  }
-  // Currently (11/2/2016) only supported by Chrome
-  else if (e.target.id === "tabs-highlight") { // highlights current tab and next tab (cycles back to first tab if current tab is the last one)
-    callOnActiveTab((tab, tabs) => {
-      let next = (tab.index+1) % tabs.length;
-      browser.tabs.highlight({tabs:[tab.index, next]});
-    });
-  }

  else if (e.target.classList.contains('switch-tabs')) {
    var tabId = +e.target.getAttribute('href');
--- a/window-manipulator/window.html
+++ b/window-manipulator/window.html
@@ -18,6 +18,10 @@

      <div class="panel-section-separator"></div>

+      <a href="#" id="window-preface-title">Preface title</a><br>
+
+      <div class="panel-section-separator"></div>
+
      <a href="#" id="window-create-incognito">Create new incognito window</a><br>
      <a href="#" id="window-create-normal">Create normal window</a><br>
      <a href="#" id="window-create-panel">Create panel</a><br>
--- a/window-manipulator/window.js
+++ b/window-manipulator/window.js
@@ -92,5 +92,14 @@ document.addEventListener("click", (e) => {
    });
  }

+  else if (e.target.id === "window-preface-title") {
+    getCurrentWindow().then((currentWindow) => {
+      let updateInfo = {
+        titlePreface: "Preface | "
+      }
+      browser.windows.update(currentWindow.id, updateInfo);
+    });
+  }
+
  e.preventDefault();
 });