diff --git a/cookie-bg-picker/README.md b/cookie-bg-picker/README.md new file mode 100644 index 0000000..5ff23e5 --- /dev/null +++ b/cookie-bg-picker/README.md @@ -0,0 +1,36 @@ +# Cookie BG Picker +A background customizer WebExtension — click a button in the browser UI and select from a range of background image tiles and colors to customize the look of any web page you are on. + +The WebExtension also uses cookies to save preferences for each site you customize, provided the cookie is able to be saved. On your return, your customizations will be remembered. + +Works in Firefox 47+, and will also work as a Chrome extension, out of the box. + +## What it does + +This extension includes: + +* A browser action that creates a popup — within the popup is: + * Several buttons to select different background images. + * A color picker input element to select a new background color. + * A reset button to remove any customizations that have been set. + * Functions to save customization preferences into cookies for each site visited and customized. + * Functions to send messages to the content script (see below) containing style information so that style customizations can be applied to the pages. +* A background script to retrieve any cookies previously set by the WebExtension for each page visited, and if so send messages to the content script (see below) containing style information so that previously saved style customizations can be applied to pages as soon as they are visited in the browser. The background script also injects the content script into each page visited. +* A content script that is injected into every page visited. Its function is to receive messages from the browser action and background scripts and apply the style information contained within to the current page. + + +Cookie BG Picker uses the WebExtension: + +* [cookies API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/cookies) to save/retrieve/remove the cookies. +* [tabs API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs) to retrieve information about the current tab (whenever a new URL is loaded and at each significant point thereafter), inject the content script into it, and to send messages between the browser action/background script and the content script. +* [runtime API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime) to receive and handle messages sent to the content script. + +## What it shows + +* How to persist data via cookies using a WebExtension. +* How to send messages between browser actions/background scripts and content scripts. + +## Acknowledgements + +* WebExtension icon courtesy of [icons8.com](http://icons8.com). +* Transparent background images taken from [Transparent Textures](https://www.transparenttextures.com/). \ No newline at end of file diff --git a/cookie-bg-picker/background_scripts/background.js b/cookie-bg-picker/background_scripts/background.js new file mode 100644 index 0000000..8a728ab --- /dev/null +++ b/cookie-bg-picker/background_scripts/background.js @@ -0,0 +1,26 @@ +/* Retrieve any previously set cookie and send to content script */ + +chrome.tabs.onUpdated.addListener(cookieUpdate); + +function cookieUpdate(tabId, changeInfo, tab) { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + /* inject content script into current tab */ + + chrome.tabs.executeScript(null, { + file: "/content_scripts/updatebg.js" + }); + + // get any previously set cookie for the current tab + + chrome.cookies.get({ + url: tabs[0].url, + name: "bgpicker" + }, function(cookie) { + if(cookie) { + var cookieVal = JSON.parse(cookie.value); + chrome.tabs.sendMessage(tabs[0].id, {image: cookieVal.image}); + chrome.tabs.sendMessage(tabs[0].id, {color: cookieVal.color}); + } + }); + }); +} \ No newline at end of file diff --git a/cookie-bg-picker/content_scripts/updatebg.js b/cookie-bg-picker/content_scripts/updatebg.js new file mode 100644 index 0000000..045a1e4 --- /dev/null +++ b/cookie-bg-picker/content_scripts/updatebg.js @@ -0,0 +1,19 @@ +var html = document.querySelector('html'); +var body = document.querySelector('body'); + +chrome.runtime.onMessage.addListener(updateBg); + +function updateBg(request, sender, sendResponse) { + if(request.image) { + html.style.backgroundImage = 'url(' + request.image + ')'; + body.style.backgroundImage = 'url(' + request.image + ')'; + } else if(request.color) { + html.style.backgroundColor = request.color; + body.style.backgroundColor = request.color; + } else if (request.reset) { + html.style.backgroundImage = ''; + html.style.backgroundColor = ''; + body.style.backgroundImage = ''; + body.style.backgroundColor = ''; + } +} \ No newline at end of file diff --git a/cookie-bg-picker/icons/bgpicker-32.png b/cookie-bg-picker/icons/bgpicker-32.png new file mode 100644 index 0000000..5889126 Binary files /dev/null and b/cookie-bg-picker/icons/bgpicker-32.png differ diff --git a/cookie-bg-picker/icons/bgpicker-48.png b/cookie-bg-picker/icons/bgpicker-48.png new file mode 100644 index 0000000..ec51b34 Binary files /dev/null and b/cookie-bg-picker/icons/bgpicker-48.png differ diff --git a/cookie-bg-picker/manifest.json b/cookie-bg-picker/manifest.json new file mode 100644 index 0000000..7a114ce --- /dev/null +++ b/cookie-bg-picker/manifest.json @@ -0,0 +1,47 @@ +{ + + "manifest_version": 2, + "name": "Cookie BG Picker", + "version": "1.0", + + "description": "Allows the user to customize the background color and pattern of their sites. Also saves their preferences via cookies where possible.", + "icons": { + "48": "icons/bgpicker-48.png" + }, + + "applications": { + "gecko": { + "id": "quicknote@mozilla.org", + "strict_min_version": "45.0" + } + }, + + "permissions": [ + "tabs", + "cookies", + "" + ], + + "web_accessible_resources": [ + "popup/images/bullseyes.png", + "popup/images/starring.png", + "popup/images/subtle.png", + "popup/images/tactilenoise.png", + "popup/images/triangles.png", + "popup/images/triangles2.png", + "popup/images/washi.png", + "popup/images/whitey.png" + ], + + "browser_action": { + "default_icon": { + "32" : "icons/bgpicker-32.png" + }, + "default_title": "BG Picker", + "default_popup": "popup/bgpicker.html" + }, + + "background": { + "scripts": ["background_scripts/background.js"] + } +} diff --git a/cookie-bg-picker/popup/bgpicker.css b/cookie-bg-picker/popup/bgpicker.css new file mode 100644 index 0000000..d69f89a --- /dev/null +++ b/cookie-bg-picker/popup/bgpicker.css @@ -0,0 +1,39 @@ +/* General styling */ + +* { + box-sizing: border-box; +} + +html { + font-family: sans-serif; + font-size: 10px; + background: rgb(150,150,150); + height: 88px; + margin: 0; +} + +body { + width: 208px; + margin: 0 auto; + height: inherit; +} + +.bg-container button { + display: inline-block; + width: 50px; + height: 30px; + margin: 1px; +} + +.color-reset { + width: 208px; + height: 20px; +} + +input, .color-reset button { + display: block; + width: 48%; + height: 110%; + float: left; + margin: 0 1% 1% 1%; +} \ No newline at end of file diff --git a/cookie-bg-picker/popup/bgpicker.html b/cookie-bg-picker/popup/bgpicker.html new file mode 100644 index 0000000..96e41d2 --- /dev/null +++ b/cookie-bg-picker/popup/bgpicker.html @@ -0,0 +1,20 @@ + + + + + + + + + +
+ +
+
+ +
+ + + + + diff --git a/cookie-bg-picker/popup/bgpicker.js b/cookie-bg-picker/popup/bgpicker.js new file mode 100644 index 0000000..df13bfc --- /dev/null +++ b/cookie-bg-picker/popup/bgpicker.js @@ -0,0 +1,62 @@ +/* initialise variables */ + +var bgBtns = document.querySelectorAll('.bg-container button'); +var colorPick = document.querySelector('input'); +var reset = document.querySelector('.color-reset button'); +var cookieVal = { image : '', + color : '' }; + +/* apply backgrounds to buttons */ +/* add listener so that when clicked, button applies background to page HTML */ + +for(var i = 0; i < bgBtns.length; i++) { + var imgName = bgBtns[i].getAttribute('class'); + var bgImg = 'url(\'images/' + imgName + '.png\')'; + bgBtns[i].style.backgroundImage = bgImg; + + bgBtns[i].onclick = function(e) { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + var imgName = e.target.getAttribute('class'); + var fullURL = chrome.extension.getURL('popup/images/'+ imgName + '.png'); + chrome.tabs.sendMessage(tabs[0].id, {image: fullURL}); + + cookieVal.image = fullURL; + chrome.cookies.set({ + url: tabs[0].url, + name: "bgpicker", + value: JSON.stringify(cookieVal) + }) + }); + } +} + +/* apply chosen color to HTML background */ + +colorPick.onchange = function(e) { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + var currColor = e.target.value; + chrome.tabs.sendMessage(tabs[0].id, {color: currColor}); + + cookieVal.color = currColor; + chrome.cookies.set({ + url: tabs[0].url, + name: "bgpicker", + value: JSON.stringify(cookieVal) + }) + }); +} + +/* reset background */ + +reset.onclick = function() { + chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { + chrome.tabs.sendMessage(tabs[0].id, {reset: true}); + + cookieVal = { image : '', + color : '' }; + chrome.cookies.remove({ + url: tabs[0].url, + name: "bgpicker" + }) + }); +} \ No newline at end of file diff --git a/cookie-bg-picker/popup/images/bullseyes.png b/cookie-bg-picker/popup/images/bullseyes.png new file mode 100644 index 0000000..cd38bcc Binary files /dev/null and b/cookie-bg-picker/popup/images/bullseyes.png differ diff --git a/cookie-bg-picker/popup/images/starring.png b/cookie-bg-picker/popup/images/starring.png new file mode 100644 index 0000000..a4f657c Binary files /dev/null and b/cookie-bg-picker/popup/images/starring.png differ diff --git a/cookie-bg-picker/popup/images/subtle.png b/cookie-bg-picker/popup/images/subtle.png new file mode 100644 index 0000000..f1c1cb8 Binary files /dev/null and b/cookie-bg-picker/popup/images/subtle.png differ diff --git a/cookie-bg-picker/popup/images/tactilenoise.png b/cookie-bg-picker/popup/images/tactilenoise.png new file mode 100644 index 0000000..86b64e4 Binary files /dev/null and b/cookie-bg-picker/popup/images/tactilenoise.png differ diff --git a/cookie-bg-picker/popup/images/triangles.png b/cookie-bg-picker/popup/images/triangles.png new file mode 100644 index 0000000..a5b7a27 Binary files /dev/null and b/cookie-bg-picker/popup/images/triangles.png differ diff --git a/cookie-bg-picker/popup/images/triangles2.png b/cookie-bg-picker/popup/images/triangles2.png new file mode 100644 index 0000000..e24590c Binary files /dev/null and b/cookie-bg-picker/popup/images/triangles2.png differ diff --git a/cookie-bg-picker/popup/images/washi.png b/cookie-bg-picker/popup/images/washi.png new file mode 100644 index 0000000..5d3f25d Binary files /dev/null and b/cookie-bg-picker/popup/images/washi.png differ diff --git a/cookie-bg-picker/popup/images/whitey.png b/cookie-bg-picker/popup/images/whitey.png new file mode 100644 index 0000000..dd660f3 Binary files /dev/null and b/cookie-bg-picker/popup/images/whitey.png differ diff --git a/examples.json b/examples.json index 366e4da..b55e7ef 100644 --- a/examples.json +++ b/examples.json @@ -132,6 +132,42 @@ } ] }, + { + "name": "cookie-bg-picker", + "description": "Allows the user to customize the background color and tiled pattern on sites the visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized.", + "url": "https://github.com/mdn/webextensions-examples/tree/master/cookie-bg-picker", + "manifest_keys": [ + "permissions", + "browser_action", + "background", + "web_accessible_resources" + ], + "javascript_modules": [ + { + "name": "tabs", + "apis": [ + "executeScript", + "sendMessage", + "query" + ] + }, + { + "name": "cookies", + "apis": [ + "Cookies", + "get", + "set", + "remove" + ] + }, + { + "name": "runtime", + "apis": [ + "onMessage" + ] + } + ] + }, { "name": "context-menu-demo", "description": "Demonstrates various features of the contextMenus API.",