├── icon-16.png
├── icon-48.png
├── icon-on.png
├── designMode.gif
├── icon-128.png
├── icon-off.png
├── README.md
├── manifest.json
├── icon.svg
├── .gitignore
├── LICENSE
├── background.js
└── content.js


/icon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/icon-16.png


--------------------------------------------------------------------------------
/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/icon-48.png


--------------------------------------------------------------------------------
/icon-on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/icon-on.png


--------------------------------------------------------------------------------
/designMode.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/designMode.gif


--------------------------------------------------------------------------------
/icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/icon-128.png


--------------------------------------------------------------------------------
/icon-off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stefanjudis/designMode-chrome-extension/HEAD/icon-off.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # DesignMode - Chrome Extension
 2 | 
 3 | ![alt text](./designMode.gif "Show off Design Mode")
 4 | 
 5 | ## How does this work?
 6 | 
 7 | Found in the [spec](https://html.spec.whatwg.org/multipage/interaction.html#making-entire-documents-editable:-the-designmode-idl-attribute):
 8 | 
 9 | > Documents have a designMode, which can be either enabled or disabled.
10 | 
11 | By running `document.designMode = 'on'` in the JavaScript console websites become magically editable.
12 | 
13 | Sounds cool? It is! Give a try.


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "DesignMode",
 4 |   "description": "Tiny helper to enable document.designMode",
 5 |   "version": "1.1",
 6 |   "background": {
 7 |     "scripts": ["background.js"]
 8 |   },
 9 |   "content_scripts": [{
10 |     "matches": ["http://*/*", "https://*/*"],
11 |     "js": ["content.js"]
12 |   }],
13 |   "icons": {
14 |     "16": "icon-16.png",
15 |     "48": "icon-48.png",
16 |     "128": "icon-128.png"
17 |   },
18 |   "browser_action": {
19 |     "default_icon": "icon-off.png",
20 |     "default_title": "Enable design mode!"
21 |   },
22 |   "permissions": [
23 |     "activeTab"
24 |   ]
25 | }


--------------------------------------------------------------------------------
/icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="366" height="366" viewBox="0 0 366 366" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Rectangle</title><defs><path id="a" d="M233.93 72l42.986 42.986-147.93 147.93L86 219.93 233.93 72"/><mask id="b" x="0" y="0" width="190.916" height="190.916" fill="#fff"><use xlink:href="#a"/></mask></defs><g transform="translate(8 9)" stroke="#7DD270" fill="none" fill-rule="evenodd"><path d="M174.839 348c96.033 0 173.883-77.902 173.883-174S270.872 0 174.84 0C78.805 0 .955 77.902.955 174s77.85 174 173.884 174z" stroke-width="12"/><use mask="url(#b)" stroke-width="24" xlink:href="#a"/><path stroke-width="10" d="M85.755 235l27.473 27.473L72 276.228z"/></g></svg>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # nyc test coverage
18 | .nyc_output
19 | 
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 | 
23 | # node-waf configuration
24 | .lock-wscript
25 | 
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 | 
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | 
33 | # Optional npm cache directory
34 | .npm
35 | 
36 | # Optional REPL history
37 | .node_repl_history
38 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Stefan Judis
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | function updateBrowserAction( designMode ) {
 2 |   chrome.browserAction.setIcon({
 3 |     path: `./icon-${ designMode }.png`
 4 |   });
 5 | 
 6 |   const title = designMode === 'off' ?
 7 |                 'Enable DesignMode' :
 8 |                 'Disable DesignMode';
 9 | 
10 |   chrome.browserAction.setTitle({ title });
11 | }
12 | 
13 | function toggleDesignMode() {
14 |   chrome.tabs.query({ active : true, currentWindow : true }, tabs => {
15 |     chrome.tabs.sendMessage(
16 |       tabs[ 0 ].id,
17 |       { text: 'toggle_designMode' },
18 |       updateBrowserAction
19 |     );
20 |   });
21 | }
22 | 
23 | function handleTabUpdate( tabId ) {
24 |   chrome.tabs.sendMessage(
25 |     tabId,
26 |     { text: 'report_designMode' },
27 |     designMode => {
28 |       if ( designMode ) {
29 |         chrome.browserAction.enable( tabId );
30 |         updateBrowserAction( designMode );
31 |       } else {
32 |         chrome.browserAction.disable( tabId );
33 |         chrome.browserAction.setTitle({ title: 'Not available. Reloading might help?' });
34 |       }
35 |     }
36 |   );
37 | }
38 | 
39 | chrome.browserAction.onClicked.addListener(toggleDesignMode);
40 | chrome.tabs.onUpdated.addListener( handleTabUpdate );
41 | chrome.tabs.onActivated.addListener( tab => handleTabUpdate( tab.tabId ));


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
 1 | chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
 2 |   if (msg.text === 'report_designMode') {
 3 |     sendResponse(document.designMode);
 4 |   }
 5 | 
 6 |   if (msg.text === 'toggle_designMode') {
 7 |     document.designMode = document.designMode === 'off' ? 'on' : 'off';
 8 |     sendResponse(document.designMode)
 9 | 
10 |     toggleNotifier(document.designMode);
11 |   }
12 | });
13 | 
14 | let notifier;
15 | let style;
16 | 
17 | function toggleNotifier( designMode ) {
18 |   if ( ! notifier ) {
19 |     notifier = getNotifierElement();
20 |     document.body.appendChild(notifier);
21 |   }
22 | 
23 |   if ( designMode === 'on' ) {
24 |     notifier.style.display = 'block';
25 | 
26 |     style = document.createElement( 'style' );
27 |     style.textContent = `
28 |       input[type="button"], input[type="submit"], input[type="reset"], select, button, a { pointer-events: none; }
29 |     `;
30 |     document.head.appendChild( style );
31 |   } else {
32 |     notifier.style.display = 'none';
33 | 
34 |     if ( style ) {
35 |       document.head.removeChild( style );
36 |       style = null;
37 |     }
38 |   }
39 | }
40 | 
41 | function getNotifierElement() {
42 |   const notifier = document.createElement( 'div' );
43 |   notifier.id = 'designMode-chromeExtension';
44 |   notifier.innerHTML = `
45 |     <svg width="32" height="32" viewBox="0 0 366 366" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
46 |       <title>DocumentEdit is enabled</title>
47 |       <defs>
48 |         <path id="a" d="M233.93 72l42.986 42.986-147.93 147.93L86 219.93 233.93 72"/>
49 |         <mask id="b" x="0" y="0" width="190.916" height="190.916" fill="#fff">
50 |           <use xlink:href="#a"/>
51 |         </mask>
52 |       </defs>
53 |       <g transform="translate(8 9)" stroke="#7DD270" fill="none" fill-rule="evenodd">
54 |         <path d="M174.839 348c96.033 0 173.883-77.902 173.883-174S270.872 0 174.84 0C78.805 0 .955 77.902.955 174s77.85 174 173.884 174z" stroke-width="12"/>
55 |         <use mask="url(#b)" stroke-width="24" xlink:href="#a"/>
56 |         <path stroke-width="10" d="M85.755 235l27.473 27.473L72 276.228z"/>
57 |       </g>
58 |     </svg>
59 |   `;
60 | 
61 | 
62 |   Object.assign( notifier.style, {
63 |     padding                : '6px',
64 |     position               : 'fixed',
65 |     width                  : 'auto',
66 |     background             : 'rgba( 255, 255, 255, .925 )',
67 |     top                    : '0',
68 |     right                  : '0',
69 |     zIndex                 : '999999',
70 |     borderBottomLeftRadius : '24px',
71 |     boxShadow              : '0 1px 2px #999'
72 |   });
73 | 
74 |   return notifier;
75 | }


--------------------------------------------------------------------------------