- weta_fade: a basic theme employing a single image specified in
headerURL:. - weta_fade_chrome: the weta_fade theme implemented with Chrome compatible manifest keys.
- weta_tiled: a theme using a tiled image.
- weta_mirror: a theme using multiple images and aligning those images in the header.
- animated: use of an animated PNG.
+
+
+
+
+ Drag an image file into this Drop Zone ...
+
+
+
+
+
+
+
diff --git a/imagify/viewer.css b/imagify/viewer.css
new file mode 100644
index 0000000..00c0af5
--- /dev/null
+++ b/imagify/viewer.css
@@ -0,0 +1,8 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+img {
+ width: 100%;
+}
diff --git a/imagify/viewer.html b/imagify/viewer.html
new file mode 100644
index 0000000..e48614f
--- /dev/null
+++ b/imagify/viewer.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+```
+
+in plain Javascript (without JSX) this becomes:
+
+```
+// Shortcut for React components render methods.
+const el = React.createElement;
+
+class Popup extends React.Component {
+ render() {
+ return el("div", {className: "important"}, [
+ el("h3", {}, "A title"),
+ el("p", {}, "A text paragraph"),
+ ]);
+ }
+}
+```
diff --git a/store-collected-images/webextension-plain/background.js b/store-collected-images/webextension-plain/background.js
new file mode 100644
index 0000000..436131f
--- /dev/null
+++ b/store-collected-images/webextension-plain/background.js
@@ -0,0 +1,47 @@
+// Open the UI to navigate the collection images in a tab.
+browser.browserAction.onClicked.addListener(() => {
+ browser.tabs.create({url: "/navigate-collection.html"});
+});
+
+// Add a context menu action on every image element in the page.
+browser.contextMenus.create({
+ id: "collect-image",
+ title: "Add to the collected images",
+ contexts: ["image"],
+});
+
+// Manage pending collected images.
+let pendingCollectedUrls = [];
+browser.runtime.onMessage.addListener((msg) => {
+ if (msg.type === "get-pending-collected-urls") {
+ let urls = pendingCollectedUrls;
+ pendingCollectedUrls = [];
+ return Promise.resolve(urls);
+ }
+});
+
+// Handle the context menu action click events.
+browser.contextMenus.onClicked.addListener(async (info) => {
+ try {
+ await browser.runtime.sendMessage({
+ type: "new-collected-images",
+ url: info.srcUrl,
+ });
+ } catch (err) {
+ if (err.message.includes("Could not establish connection. Receiving end does not exist.")) {
+ // Add the url to the pending urls and open a popup.
+ pendingCollectedUrls.push(info.srcUrl);
+ try {
+ await browser.windows.create({
+ type: "popup", url: "/popup.html",
+ top: 0, left: 0, width: 300, height: 400,
+ });
+ } catch (err) {
+ console.error(err);
+ }
+ return;
+ }
+
+ console.error(err);
+ }
+});
diff --git a/store-collected-images/webextension-plain/deps/idb-file-storage.js b/store-collected-images/webextension-plain/deps/idb-file-storage.js
new file mode 100644
index 0000000..984a7f8
--- /dev/null
+++ b/store-collected-images/webextension-plain/deps/idb-file-storage.js
@@ -0,0 +1,801 @@
+(function (global, factory) {
+ if (typeof define === "function" && define.amd) {
+ define("idb-file-storage", ["exports"], factory);
+ } else if (typeof exports !== "undefined") {
+ factory(exports);
+ } else {
+ var mod = {
+ exports: {}
+ };
+ factory(mod.exports);
+ global.IDBFiles = mod.exports;
+ }
+})(this, function (exports) {
+ "use strict";
+
+ /**
+ * @typedef {Object} IDBPromisedFileHandle.Metadata
+ * @property {number} size
+ * The size of the file in bytes.
+ * @property {Date} last Modified
+ * The time and date of the last change to the file.
+ */
+
+ /**
+ * @typedef {Object} IDBFileStorage.ListFilteringOptions
+ * @property {string} startsWith
+ * A string to be checked with `fileNameString.startsWith(...)`.
+ * @property {string} endsWith
+ * A string to be checked with `fileNameString.endsWith(...)`.
+ * @property {string} includes
+ * A string to be checked with `fileNameString.includes(...)`.
+ * @property {function} filterFn
+ * A function to be used to check the file name (`filterFn(fileNameString)`).
+ */
+
+ /**
+ * Wraps a DOMRequest into a promise, optionally transforming the result using the onsuccess
+ * callback.
+ *
+ * @param {IDBRequest|DOMRequest} req
+ * The DOMRequest instance to wrap in a Promise.
+ * @param {function} [onsuccess]
+ * An optional onsuccess callback which can transform the result before resolving it.
+ *
+ * @returns {Promise}
+ * The promise which wraps the request result, rejected if the request.onerror has been
+ * called.
+ */
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+ exports.waitForDOMRequest = waitForDOMRequest;
+ exports.getFileStorage = getFileStorage;
+ function waitForDOMRequest(req, onsuccess) {
+ return new Promise((resolve, reject) => {
+ req.onsuccess = onsuccess ? () => resolve(onsuccess(req.result)) : () => resolve(req.result);
+ req.onerror = () => reject(req.error);
+ });
+ }
+
+ /**
+ * Wraps an IDBMutableFile's FileHandle with a nicer Promise-based API.
+ *
+ * Instances of this class are created from the
+ * {@link IDBPromisedMutableFile.open} method.
+ */
+ class IDBPromisedFileHandle {
+ /**
+ * @private private helper method used internally.
+ */
+ constructor({ file, lockedFile }) {
+ // All the following properties are private and it should not be needed
+ // while using the API.
+
+ /** @private */
+ this.file = file;
+ /** @private */
+ this.lockedFile = lockedFile;
+ /** @private */
+ this.writeQueue = Promise.resolve();
+ /** @private */
+ this.closed = undefined;
+ /** @private */
+ this.aborted = undefined;
+ }
+
+ /**
+ * @private private helper method used internally.
+ */
+ ensureLocked({ invalidMode } = {}) {
+ if (this.closed) {
+ throw new Error("FileHandle has been closed");
+ }
+
+ if (this.aborted) {
+ throw new Error("FileHandle has been aborted");
+ }
+
+ if (!this.lockedFile) {
+ throw new Error("Invalid FileHandled");
+ }
+
+ if (invalidMode && this.lockedFile.mode === invalidMode) {
+ throw new Error(`FileHandle should not be opened as '${this.lockedFile.mode}'`);
+ }
+ if (!this.lockedFile.active) {
+ // Automatically relock the file with the last open mode
+ this.file.reopenFileHandle(this);
+ }
+ }
+
+ // Promise-based MutableFile API
+
+ /**
+ * Provide access to the mode that has been used to open the {@link IDBPromisedMutableFile}.
+ *
+ * @type {"readonly"|"readwrite"|"writeonly"}
+ */
+ get mode() {
+ return this.lockedFile.mode;
+ }
+
+ /**
+ * A boolean property that is true if the lock is still active.
+ *
+ * @type {boolean}
+ */
+ get active() {
+ return this.lockedFile ? this.lockedFile.active : false;
+ }
+
+ /**
+ * Close the locked file (and wait for any written data to be flushed if needed).
+ *
+ * @returns {Promise}
+ * A promise which is resolved when the close request has been completed
+ */
+ async close() {
+ if (!this.lockedFile) {
+ throw new Error("FileHandle is not open");
+ }
+
+ // Wait the queued write to complete.
+ await this.writeQueue;
+
+ // Wait for flush request to complete if needed.
+ if (this.lockedFile.active && this.lockedFile.mode !== "readonly") {
+ await waitForDOMRequest(this.lockedFile.flush());
+ }
+
+ this.closed = true;
+ this.lockedFile = null;
+ this.writeQueue = Promise.resolve();
+ }
+
+ /**
+ * Abort any pending data request and set the instance as aborted.
+ *
+ * @returns {Promise}
+ * A promise which is resolved when the abort request has been completed
+ */
+ async abort() {
+ if (this.lockedFile.active) {
+ // NOTE: in the docs abort is reported to return a DOMRequest, but it doesn't seem
+ // to be the case. (https://developer.mozilla.org/en-US/docs/Web/API/LockedFile/abort)
+ this.lockedFile.abort();
+ }
+
+ this.aborted = true;
+ this.lockedFile = null;
+ this.writeQueue = Promise.resolve();
+ }
+
+ /**
+ * Get the file metadata (take a look to {@link IDBPromisedFileHandle.Metadata} for more info).
+ *
+ * @returns {Promise<{size: number, lastModified: Date}>}
+ * A promise which is resolved when the request has been completed
+ */
+ async getMetadata() {
+ this.ensureLocked();
+ return waitForDOMRequest(this.lockedFile.getMetadata());
+ }
+
+ /**
+ * Read a given amount of data from the file as Text (optionally starting from the specified
+ * location).
+ *
+ * @param {number} size
+ * The amount of data to read.
+ * @param {number} [location]
+ * The location where the request should start to read the data.
+ *
+ * @returns {PromiseA title
+A text paragraph
+
+
+
+
+
+
+
+
+
diff --git a/store-collected-images/webextension-plain/navigate-collection.js b/store-collected-images/webextension-plain/navigate-collection.js
new file mode 100644
index 0000000..b5d49f9
--- /dev/null
+++ b/store-collected-images/webextension-plain/navigate-collection.js
@@ -0,0 +1,85 @@
+/* global loadStoredImages, removeStoredImages */
+
+"use strict";
+
+class NavigateCollectionUI {
+ constructor(containerEl) {
+ this.containerEl = containerEl;
+
+ this.state = {
+ storedImages: [],
+ };
+
+ this.onFilterUpdated = this.onFilterUpdated.bind(this);
+ this.onReload = this.onFilterUpdated;
+ this.onDelete = this.onDelete.bind(this);
+
+ this.containerEl.querySelector("button.reload-images").onclick = this.onReload;
+ this.containerEl.querySelector("button.delete-images").onclick = this.onDelete;
+ this.containerEl.querySelector("input.image-filter").onchange = this.onFilterUpdated;
+
+ // Load the stored image once the component has been rendered in the page.
+ this.onFilterUpdated();
+ }
+
+ get imageFilterValue() {
+ return this.containerEl.querySelector("input.image-filter").value;
+ }
+
+ set imageFilterValue(value) {
+ return this.containerEl.querySelector("input.image-filter").value = value;
+ }
+
+ setState(state) {
+ // Merge the new state on top of the previous one and re-render everything.
+ this.state = Object.assign(this.state, state);
+ this.render();
+ }
+
+ componentDidMount() {
+ // Load the stored image once the component has been rendered in the page.
+ this.onFilterUpdated();
+ }
+
+ onFilterUpdated() {
+ loadStoredImages(this.imageFilterValue)
+ .then((storedImages) => {
+ this.setState({storedImages});
+ })
+ .catch(console.error);
+ }
+
+ onDelete() {
+ const {storedImages} = this.state;
+ this.setState({storedImages: []});
+
+ removeStoredImages(storedImages).catch(console.error);
+ }
+
+ render() {
+ const {storedImages} = this.state;
+
+ const thumbnailsUl = this.containerEl.querySelector("ul.thumbnails");
+ while (thumbnailsUl.firstChild) {
+ thumbnailsUl.removeChild(thumbnailsUl.firstChild);
+ }
+
+ storedImages.forEach(({storedName, blobUrl}) => {
+ const onClickedImage = () => {
+ this.imageFilterValue = storedName;
+ this.onFilterUpdated();
+ };
+ const li = document.createElement("li");
+ const img = document.createElement("img");
+ li.setAttribute("id", storedName);
+ img.setAttribute("src", blobUrl);
+ img.onclick = onClickedImage;
+
+ li.appendChild(img);
+ thumbnailsUl.appendChild(li);
+ });
+ }
+}
+
+// eslint-disable-next-line no-unused-vars
+const navigateCollectionUI = new NavigateCollectionUI(document.getElementById('app'));
diff --git a/store-collected-images/webextension-plain/popup.css b/store-collected-images/webextension-plain/popup.css
new file mode 100755
index 0000000..2c7ea8d
--- /dev/null
+++ b/store-collected-images/webextension-plain/popup.css
@@ -0,0 +1,12 @@
+@import "shared.css";
+
+html, body {
+ width: 250px;
+ margin: 0;
+ padding: 0;
+ margin-left: 1em;
+}
+
+input {
+ width: 90%;
+}
diff --git a/store-collected-images/webextension-plain/popup.html b/store-collected-images/webextension-plain/popup.html
new file mode 100755
index 0000000..d7b4798
--- /dev/null
+++ b/store-collected-images/webextension-plain/popup.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+ Stored images
+ + + +
+
+
+
+
+
+
+
+
diff --git a/store-collected-images/webextension-plain/popup.js b/store-collected-images/webextension-plain/popup.js
new file mode 100644
index 0000000..0b3fc6a
--- /dev/null
+++ b/store-collected-images/webextension-plain/popup.js
@@ -0,0 +1,127 @@
+/* global saveCollectedBlobs, uuidv4, preventWindowDragAndDrop */
+
+"use strict";
+
+class Popup {
+ constructor(containerEl) {
+ this.containerEl = containerEl;
+
+ this.state = {
+ collectedBlobs: [],
+ lastMessage: undefined,
+ };
+
+ this.onClick = this.onClick.bind(this);
+
+ this.containerEl.querySelector("button.save-collection").onclick = this.onClick;
+ }
+
+ get collectionNameValue() {
+ return this.containerEl.querySelector("input.collection-name").value;
+ }
+
+ setState(state) {
+ // Merge the new state on top of the previous one and re-render everything.
+ this.state = Object.assign(this.state, state);
+ this.render();
+ }
+
+ onClick() {
+ if (!this.collectionNameValue) {
+ this.setState({
+ lastMessage: {text: "The collection name is mandatory.", type: "error"},
+ });
+
+ setTimeout(() => {
+ this.setState({lastMessage: undefined});
+ }, 2000);
+
+ return;
+ }
+
+ saveCollectedBlobs(this.collectionNameValue, this.state.collectedBlobs)
+ .then(() => {
+ this.setState({
+ lastMessage: {text: "All the collected images have been saved", type: "success"},
+ collectedBlobs: [],
+ });
+
+ setTimeout(() => {
+ this.setState({lastMessage: undefined});
+ }, 2000);
+ })
+ .catch((err) => {
+ this.setState({
+ lastMessage: {text: `Failed to save collected images: ${err}`, type: "error"},
+ });
+
+ setTimeout(() => {
+ this.setState({lastMessage: undefined});
+ }, 2000);
+ });
+ }
+
+ render() {
+ const {collectedBlobs, lastMessage} = this.state;
+
+ const lastMessageEl = this.containerEl.querySelector("p#error-message");
+ if (lastMessage) {
+ lastMessageEl.setAttribute("class", lastMessage.type);
+ lastMessageEl.textContent = lastMessage.text;
+ } else {
+ lastMessageEl.setAttribute("class", "");
+ lastMessageEl.textContent = "";
+ }
+
+ const thumbnailsUl = this.containerEl.querySelector("ul.thumbnails");
+ while (thumbnailsUl.firstChild) {
+ thumbnailsUl.removeChild(thumbnailsUl.firstChild);
+ }
+
+ collectedBlobs.forEach(({uuid, blobUrl}) => {
+ const li = document.createElement("li");
+ const img = document.createElement("img");
+ li.setAttribute("id", uuid);
+ img.setAttribute("src", blobUrl);
+ li.appendChild(img);
+
+ thumbnailsUl.appendChild(li);
+ });
+ }
+}
+
+const popup = new Popup(document.getElementById('app'));
+
+async function fetchBlobFromUrl(fetchUrl) {
+ const res = await fetch(fetchUrl);
+ const blob = await res.blob();
+
+ return {
+ blob,
+ blobUrl: URL.createObjectURL(blob),
+ fetchUrl,
+ uuid: uuidv4(),
+ };
+}
+
+preventWindowDragAndDrop();
+
+browser.runtime.onMessage.addListener(async (msg) => {
+ if (msg.type === "new-collected-images") {
+ let collectedBlobs = popup.state.collectedBlobs || [];
+ const fetchRes = await fetchBlobFromUrl(msg.url);
+ collectedBlobs.push(fetchRes);
+ popup.setState({collectedBlobs});
+ return true;
+ }
+});
+
+browser.runtime.sendMessage({type: "get-pending-collected-urls"}).then(async res => {
+ let collectedBlobs = popup.state.collectedBlobs || [];
+
+ for (const url of res) {
+ const fetchRes = await fetchBlobFromUrl(url);
+ collectedBlobs.push(fetchRes);
+ popup.setState({collectedBlobs});
+ }
+});
diff --git a/store-collected-images/webextension-plain/shared.css b/store-collected-images/webextension-plain/shared.css
new file mode 100644
index 0000000..e31f58c
--- /dev/null
+++ b/store-collected-images/webextension-plain/shared.css
@@ -0,0 +1,22 @@
+ul.thumbnails {
+ padding: 0;
+}
+
+ul.thumbnails li {
+ display: inline-block;
+ vertical-align: middle;
+ padding: 0.4em;
+}
+
+.thumbnails img {
+ max-width: 50px;
+ max-height: 50px;
+}
+
+.error {
+ background: rgba(255,0,0,0.4);
+}
+
+.success {
+ background: rgba(0,255,0,0.4);
+}
\ No newline at end of file
diff --git a/store-collected-images/webextension-plain/utils/handle-window-drag-and-drop.js b/store-collected-images/webextension-plain/utils/handle-window-drag-and-drop.js
new file mode 100644
index 0000000..34b74ef
--- /dev/null
+++ b/store-collected-images/webextension-plain/utils/handle-window-drag-and-drop.js
@@ -0,0 +1,14 @@
+/* exported preventWindowDragAndDrop */
+
+"use strict";
+
+function preventWindowDragAndDrop() {
+ function preventDefault(ev) {
+ ev.preventDefault();
+ return true;
+ }
+
+ window.ondragover = preventDefault;
+ window.ondragend = preventDefault;
+ window.ondrop = preventDefault;
+}
diff --git a/store-collected-images/webextension-plain/utils/image-store.js b/store-collected-images/webextension-plain/utils/image-store.js
new file mode 100644
index 0000000..2c52716
--- /dev/null
+++ b/store-collected-images/webextension-plain/utils/image-store.js
@@ -0,0 +1,37 @@
+/* global IDBFiles */
+/* exported saveCollectedBlobs, loadStoredImages, removeStoredImages */
+
+"use strict";
+
+async function saveCollectedBlobs(collectionName, collectedBlobs) {
+ const storedImages = await IDBFiles.getFileStorage({name: "stored-images"});
+
+ for (const item of collectedBlobs) {
+ await storedImages.put(`${collectionName}/${item.uuid}`, item.blob);
+ }
+}
+
+async function loadStoredImages(filter) {
+ const imagesStore = await IDBFiles.getFileStorage({name: "stored-images"});
+
+ let listOptions = filter ? {includes: filter} : undefined;
+ const imagesList = await imagesStore.list(listOptions);
+
+ let storedImages = [];
+
+ for (const storedName of imagesList) {
+ const blob = await imagesStore.get(storedName);
+
+ storedImages.push({storedName, blobUrl: URL.createObjectURL(blob)});
+ }
+
+ return storedImages;
+}
+
+async function removeStoredImages(storedImages) {
+ const imagesStore = await IDBFiles.getFileStorage({name: "stored-images"});
+ for (const storedImage of storedImages) {
+ URL.revokeObjectURL(storedImage.blobUrl);
+ await imagesStore.remove(storedImage.storedName);
+ }
+}
diff --git a/store-collected-images/webextension-with-webpack/.eslintrc b/store-collected-images/webextension-with-webpack/.eslintrc
new file mode 100644
index 0000000..1adf976
--- /dev/null
+++ b/store-collected-images/webextension-with-webpack/.eslintrc
@@ -0,0 +1,6 @@
+{
+ "parser": "babel-eslint",
+ "env": {
+ "commonjs": true
+ }
+}
\ No newline at end of file
diff --git a/store-collected-images/webextension-with-webpack/.gitignore b/store-collected-images/webextension-with-webpack/.gitignore
new file mode 100644
index 0000000..20ccaa9
--- /dev/null
+++ b/store-collected-images/webextension-with-webpack/.gitignore
@@ -0,0 +1,5 @@
+# Ignore build artifacts and other files.
+.DS_Store
+yarn.lock
+extension/dist
+node_modules
diff --git a/store-collected-images/webextension-with-webpack/README.md b/store-collected-images/webextension-with-webpack/README.md
new file mode 100644
index 0000000..b768140
--- /dev/null
+++ b/store-collected-images/webextension-with-webpack/README.md
@@ -0,0 +1,32 @@
+# "Image Reference Collector" example built with webpack (and React UI)
+
+## Usage
+
+This example is built using Babel and Webpack, and so the transpiled bundles have to
+be built first:
+
+you need to change into the example subdirectory and install all
+[NodeJS][nodejs] dependencies with [npm](http://npmjs.com/) or
+[yarn](https://yarnpkg.com/):
+
+ npm install
+
+You can build the extension using:
+
+ npm run build
+
+This creates the source bundles for the WebExtension in the `extension` subdirectory, and
+you can manually install the add-on on Firefox by loading the `extension` from the
+"about:debugging#addons" page.
+
+You can also build the sources and start a new Firefox instance with the add-on installed
+in one command:
+
+ npm run start
+
+To start a webpack instance that automatically rebuilds the add-on when
+you change the sources, in another shell window, you can run the following npm script:
+
+ npm run build:watch
+
+While this npm script is running, any time you edit a file, it will be rebuilt automatically.
diff --git a/store-collected-images/webextension-with-webpack/extension/images/icon.png b/store-collected-images/webextension-with-webpack/extension/images/icon.png
new file mode 100644
index 0000000..81fede1
Binary files /dev/null and b/store-collected-images/webextension-with-webpack/extension/images/icon.png differ
diff --git a/store-collected-images/webextension-with-webpack/extension/images/icon16.png b/store-collected-images/webextension-with-webpack/extension/images/icon16.png
new file mode 100644
index 0000000..8d4b5cc
Binary files /dev/null and b/store-collected-images/webextension-with-webpack/extension/images/icon16.png differ
diff --git a/store-collected-images/webextension-with-webpack/extension/manifest.json b/store-collected-images/webextension-with-webpack/extension/manifest.json
new file mode 100755
index 0000000..f99de3c
--- /dev/null
+++ b/store-collected-images/webextension-with-webpack/extension/manifest.json
@@ -0,0 +1,26 @@
+{
+ "manifest_version": 2,
+ "name": "store-collected-images",
+ "version": "1.0",
+
+ "icons": {
+ "16": "images/icon16.png",
+ "48": "images/icon.png"
+ },
+
+ "browser_action": {
+ "default_icon": {
+ "48": "images/icon.png"
+ },
+ "default_title": "Collected Images"
+ },
+
+ "background": {
+ "scripts": ["dist/background.js"]
+ },
+
+ "permissions": [
+ "contextMenus",
+ "Collected images
+ + + +-
+
-
+
+
+ );
+ }
+}
+
+ReactDOM.render(Stored images
+ + + +-
+ {
+ storedImages.map(({storedName, blobUrl}) => {
+ const onClickedImage = () => {
+ this.refs.imageFilter.value = storedName;
+ this.onFilterUpdated();
+ };
+ return
+
+ );
+ }
+}
+
+const popup = ReactDOM.render(Collected images
+ {lastMessage &&{lastMessage.text}
} + + +-
+ {
+ collectedBlobs.map(({uuid, blobUrl}) => {
+ return
Zoom out
- - - Highlight (only supported by Chrome) -
diff --git a/tabs-tabs-tabs/tabs.js b/tabs-tabs-tabs/tabs.js
index dba3dfc..4580520 100644
--- a/tabs-tabs-tabs/tabs.js
+++ b/tabs-tabs-tabs/tabs.js
@@ -47,7 +47,7 @@ function getCurrentWindowTabs() {
return browser.tabs.query({currentWindow: true});
}
-document.addEventListener("click", function(e) {
+document.addEventListener("click", (e) => {
function callOnActiveTab(callback) {
getCurrentWindowTabs().then((tabs) => {
for (var tab of tabs) {
@@ -160,23 +160,16 @@ document.addEventListener("click", function(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) => {
- 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');
- chrome.tabs.query({
+ browser.tabs.query({
currentWindow: true
- }, function(tabs) {
+ }).then((tabs) => {
for (var tab of tabs) {
if (tab.id === tabId) {
- chrome.tabs.update(tabId, {
+ browser.tabs.update(tabId, {
active: true
});
}
@@ -188,7 +181,7 @@ document.addEventListener("click", function(e) {
});
//onRemoved listener. fired when tab is removed
-browser.tabs.onRemoved.addListener(function(tabId, removeInfo){
+browser.tabs.onRemoved.addListener((tabId, removeInfo) => {
console.log(`The tab with id: ${tabId}, is closing`);
if(removeInfo.isWindowClosing) {
@@ -199,7 +192,7 @@ browser.tabs.onRemoved.addListener(function(tabId, removeInfo){
});
//onMoved listener. fired when tab is moved into the same window
-browser.tabs.onMoved.addListener(function(tabId, moveInfo){
+browser.tabs.onMoved.addListener((tabId, moveInfo) => {
var startIndex = moveInfo.fromIndex;
var endIndex = moveInfo.toIndex;
console.log(`Tab with id: ${tabId} moved from index: ${startIndex} to index: ${endIndex}`);
diff --git a/themes/animated/README.md b/themes/animated/README.md
new file mode 100644
index 0000000..f1e4744
--- /dev/null
+++ b/themes/animated/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an animated PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to use an animated image in a theme.
diff --git a/themes/animated/manifest.json b/themes/animated/manifest.json
new file mode 100755
index 0000000..e7c9751
--- /dev/null
+++ b/themes/animated/manifest.json
@@ -0,0 +1,19 @@
+{
+
+ "description": "Theme using an animated PNG file as the headerURL image. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+ "manifest_version": 2,
+ "name": "animated",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/animated",
+
+ "theme": {
+ "images": {
+ "headerURL": "parrot.png"
+ },
+
+ "colors": {
+ "accentcolor": "#ffffff",
+ "textcolor": "#000"
+ }
+ }
+}
diff --git a/themes/animated/parrot.png b/themes/animated/parrot.png
new file mode 100755
index 0000000..e77366b
Binary files /dev/null and b/themes/animated/parrot.png differ
diff --git a/themes/animated/parrot_frames/1.png b/themes/animated/parrot_frames/1.png
new file mode 100755
index 0000000..2acd576
Binary files /dev/null and b/themes/animated/parrot_frames/1.png differ
diff --git a/themes/animated/parrot_frames/10.png b/themes/animated/parrot_frames/10.png
new file mode 100755
index 0000000..071b908
Binary files /dev/null and b/themes/animated/parrot_frames/10.png differ
diff --git a/themes/animated/parrot_frames/2.png b/themes/animated/parrot_frames/2.png
new file mode 100755
index 0000000..cca931a
Binary files /dev/null and b/themes/animated/parrot_frames/2.png differ
diff --git a/themes/animated/parrot_frames/3.png b/themes/animated/parrot_frames/3.png
new file mode 100755
index 0000000..7c57152
Binary files /dev/null and b/themes/animated/parrot_frames/3.png differ
diff --git a/themes/animated/parrot_frames/4.png b/themes/animated/parrot_frames/4.png
new file mode 100755
index 0000000..14dff5e
Binary files /dev/null and b/themes/animated/parrot_frames/4.png differ
diff --git a/themes/animated/parrot_frames/5.png b/themes/animated/parrot_frames/5.png
new file mode 100755
index 0000000..e1ff036
Binary files /dev/null and b/themes/animated/parrot_frames/5.png differ
diff --git a/themes/animated/parrot_frames/6.png b/themes/animated/parrot_frames/6.png
new file mode 100755
index 0000000..17c05ec
Binary files /dev/null and b/themes/animated/parrot_frames/6.png differ
diff --git a/themes/animated/parrot_frames/7.png b/themes/animated/parrot_frames/7.png
new file mode 100755
index 0000000..3f28616
Binary files /dev/null and b/themes/animated/parrot_frames/7.png differ
diff --git a/themes/animated/parrot_frames/8.png b/themes/animated/parrot_frames/8.png
new file mode 100755
index 0000000..eb02e61
Binary files /dev/null and b/themes/animated/parrot_frames/8.png differ
diff --git a/themes/animated/parrot_frames/9.png b/themes/animated/parrot_frames/9.png
new file mode 100755
index 0000000..f73dd3d
Binary files /dev/null and b/themes/animated/parrot_frames/9.png differ
diff --git a/themes/weta_fade/README.md b/themes/weta_fade/README.md
new file mode 100644
index 0000000..e2fd8d1
--- /dev/null
+++ b/themes/weta_fade/README.md
@@ -0,0 +1,10 @@
+# Themes: weta_fade
+
+## What it does
+
+Employs a PNG image as the headerURL image in a theme.
+
+## What it shows
+
+How to create a single image theme, using a faded edge and background color to ensure
+the image works well on a range of screen sizes.
diff --git a/themes/weta_fade/manifest.json b/themes/weta_fade/manifest.json
new file mode 100644
index 0000000..30145f7
--- /dev/null
+++ b/themes/weta_fade/manifest.json
@@ -0,0 +1,19 @@
+{
+
+ "description": "Theme using a PNG as the headerURL image, employing a faded edge. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+ "manifest_version": 2,
+ "name": "weta_fade",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade",
+
+ "theme": {
+ "images": {
+ "headerURL": "weta.png"
+ },
+
+ "colors": {
+ "accentcolor": "#adb09f",
+ "textcolor": "#000"
+ }
+ }
+}
diff --git a/themes/weta_fade/weta.png b/themes/weta_fade/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_fade/weta.png differ
diff --git a/themes/weta_fade_chrome/README.md b/themes/weta_fade_chrome/README.md
new file mode 100644
index 0000000..2de7d43
--- /dev/null
+++ b/themes/weta_fade_chrome/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs an PNG image as the Chrome compatible theme_frame image in a theme.
+
+## What it shows
+
+How to use the Chrome compatible keys in a theme's manifest.json file to make a theme available for Firefox and Chrome.
diff --git a/themes/weta_fade_chrome/manifest.json b/themes/weta_fade_chrome/manifest.json
new file mode 100755
index 0000000..ea0d35d
--- /dev/null
+++ b/themes/weta_fade_chrome/manifest.json
@@ -0,0 +1,21 @@
+{
+
+ "description": "Version of the weta_fade theme using the Chrome compatible manifest keys. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+ "manifest_version": 2,
+ "name": "weta_fade_chrome",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade_chrome",
+
+
+ "theme": {
+ "images": {
+ "theme_frame": "weta.png"
+ },
+
+ "colors": {
+ "frame": [ 173 , 176 , 159 ],
+ "tab_text": [ 0 , 0 , 0 ]
+ }
+ }
+
+}
diff --git a/themes/weta_fade_chrome/weta.png b/themes/weta_fade_chrome/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_fade_chrome/weta.png differ
diff --git a/themes/weta_mirror/README.md b/themes/weta_mirror/README.md
new file mode 100644
index 0000000..7610d42
--- /dev/null
+++ b/themes/weta_mirror/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Employs two PNG images to create a mirror effect with the theme images.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": to place multiple images within the browser header.
diff --git a/themes/weta_mirror/empty.png b/themes/weta_mirror/empty.png
new file mode 100755
index 0000000..ceafa98
Binary files /dev/null and b/themes/weta_mirror/empty.png differ
diff --git a/themes/weta_mirror/manifest.json b/themes/weta_mirror/manifest.json
new file mode 100755
index 0000000..7a6749d
--- /dev/null
+++ b/themes/weta_mirror/manifest.json
@@ -0,0 +1,24 @@
+{
+
+ "description": "Theme using multiple additional_backgrounds images. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+ "manifest_version": 2,
+ "name": "weta_mirror",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror",
+
+ "theme": {
+ "images": {
+ "headerURL": "empty.png",
+ "additional_backgrounds": [ "weta.png", "weta-left.png"]
+ },
+
+ "properties": {
+ "additional_backgrounds_alignment": [ "right top" , "left top" ]
+ },
+
+ "colors": {
+ "accentcolor": "#adb09f",
+ "textcolor": "#000"
+ }
+ }
+}
diff --git a/themes/weta_mirror/weta-left.png b/themes/weta_mirror/weta-left.png
new file mode 100755
index 0000000..1c7d816
Binary files /dev/null and b/themes/weta_mirror/weta-left.png differ
diff --git a/themes/weta_mirror/weta.png b/themes/weta_mirror/weta.png
new file mode 100755
index 0000000..8b79595
Binary files /dev/null and b/themes/weta_mirror/weta.png differ
diff --git a/themes/weta_tiled/README.md b/themes/weta_tiled/README.md
new file mode 100644
index 0000000..11d539d
--- /dev/null
+++ b/themes/weta_tiled/README.md
@@ -0,0 +1,9 @@
+# Themes: Animated
+
+## What it does
+
+Tiles a PNG imagein the browser header.
+
+## What it shows
+
+How to use "additional_backgrounds": in conjunction with "additional_backgrounds_alignment": and "additional_backgrounds_tiling": to place an image within the browser header and then tile it.
diff --git a/themes/weta_tiled/empty.png b/themes/weta_tiled/empty.png
new file mode 100755
index 0000000..ceafa98
Binary files /dev/null and b/themes/weta_tiled/empty.png differ
diff --git a/themes/weta_tiled/manifest.json b/themes/weta_tiled/manifest.json
new file mode 100644
index 0000000..347b65c
--- /dev/null
+++ b/themes/weta_tiled/manifest.json
@@ -0,0 +1,25 @@
+{
+
+ "description": "Theme with a single image placed centrally and then tiled. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#themes",
+ "manifest_version": 2,
+ "name": "weta_tiled",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled",
+
+ "theme": {
+ "images": {
+ "headerURL": "empty.png",
+ "additional_backgrounds": [ "weta_for_tiling.png"]
+ },
+
+ "properties": {
+ "additional_backgrounds_alignment": [ "top" ],
+ "additional_backgrounds_tiling": [ "repeat" ]
+ },
+
+ "colors": {
+ "accentcolor": "#adb09f",
+ "textcolor": "#000"
+ }
+ }
+}
diff --git a/themes/weta_tiled/weta_for_tiling.png b/themes/weta_tiled/weta_for_tiling.png
new file mode 100755
index 0000000..467a548
Binary files /dev/null and b/themes/weta_tiled/weta_for_tiling.png differ
diff --git a/user-agent-rewriter/popup/choose_ua.js b/user-agent-rewriter/popup/choose_ua.js
index baaddaf..91dbbc9 100644
--- a/user-agent-rewriter/popup/choose_ua.js
+++ b/user-agent-rewriter/popup/choose_ua.js
@@ -4,7 +4,7 @@ If the user clicks on an element which has the class "ua-choice":
* fetch the element's textContent: for example, "IE 11"
* pass it into the background page's setUaString() function
*/
-document.addEventListener("click", function(e) {
+document.addEventListener("click", (e) => {
if (!e.target.classList.contains("ua-choice")) {
return;
}
diff --git a/webpack-modules/.eslintrc.json b/webpack-modules/.eslintrc.json
new file mode 100644
index 0000000..30e26e9
--- /dev/null
+++ b/webpack-modules/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+ "env": {
+ "browser": true,
+ "es6": true,
+ "amd": true,
+ "webextensions": true
+ }
+}
diff --git a/window-manipulator/window.html b/window-manipulator/window.html
index c1ba472..f1ebd95 100644
--- a/window-manipulator/window.html
+++ b/window-manipulator/window.html
@@ -18,6 +18,10 @@
+ Preface title
+ + + Create new incognito window
Create normal window
Create panel
diff --git a/window-manipulator/window.js b/window-manipulator/window.js index d6e36eb..b7e9396 100644 --- a/window-manipulator/window.js +++ b/window-manipulator/window.js @@ -26,48 +26,48 @@ document.addEventListener("click", (e) => { } else if (e.target.id === "window-create-normal") { - var createData = {}; - var creating = browser.windows.create(createData); + let createData = {}; + let creating = browser.windows.create(createData); creating.then(() => { console.log("The normal window has been created"); }); } else if (e.target.id === "window-create-incognito") { - var createData = { + let createData = { incognito: true, }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The incognito window has been created"); }); } else if (e.target.id === "window-create-panel") { - var createData = { + let createData = { type: "panel", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The panel has been created"); }); } else if (e.target.id === "window-create-detached-panel") { - var createData = { + let createData = { type: "detached_panel", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The detached panel has been created"); }); } else if (e.target.id === "window-create-popup") { - var createData = { + let createData = { type: "popup", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The popup has been created"); }); @@ -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(); });
+ + + Create new incognito window
Create normal window
Create panel
diff --git a/window-manipulator/window.js b/window-manipulator/window.js index d6e36eb..b7e9396 100644 --- a/window-manipulator/window.js +++ b/window-manipulator/window.js @@ -26,48 +26,48 @@ document.addEventListener("click", (e) => { } else if (e.target.id === "window-create-normal") { - var createData = {}; - var creating = browser.windows.create(createData); + let createData = {}; + let creating = browser.windows.create(createData); creating.then(() => { console.log("The normal window has been created"); }); } else if (e.target.id === "window-create-incognito") { - var createData = { + let createData = { incognito: true, }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The incognito window has been created"); }); } else if (e.target.id === "window-create-panel") { - var createData = { + let createData = { type: "panel", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The panel has been created"); }); } else if (e.target.id === "window-create-detached-panel") { - var createData = { + let createData = { type: "detached_panel", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The detached panel has been created"); }); } else if (e.target.id === "window-create-popup") { - var createData = { + let createData = { type: "popup", }; - var creating = browser.windows.create(createData); + let creating = browser.windows.create(createData); creating.then(() => { console.log("The popup has been created"); }); @@ -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(); });