├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── appveyor.yml
├── babel.config.dev.js
├── chrome
    ├── app
    │   └── components
    │   │   ├── Button.css
    │   │   ├── Button.js
    │   │   ├── CodeDiff.css
    │   │   ├── CodeDiff.js
    │   │   ├── Dropdown.css
    │   │   ├── Dropdown.js
    │   │   ├── FeedbackForm.css
    │   │   ├── FeedbackForm.js
    │   │   ├── HeaderBar.css
    │   │   ├── HeaderBar.js
    │   │   ├── Icon.css
    │   │   ├── Icon.js
    │   │   ├── StylesheetCodePreview.css
    │   │   ├── StylesheetCodePreview.js
    │   │   ├── Switcher.css
    │   │   ├── Switcher.js
    │   │   └── WhiteTextLogo.js
    ├── assets
    │   └── img
    │   │   ├── default_128x128.png
    │   │   ├── default_16x16.png
    │   │   ├── default_19x19.png
    │   │   ├── default_38x38.png
    │   │   ├── default_48x48.png
    │   │   ├── plus_128x128.png
    │   │   ├── plus_16x16.png
    │   │   ├── plus_19x19.png
    │   │   ├── plus_38x38.png
    │   │   ├── plus_48x48.png
    │   │   ├── white-text-logo.png
    │   │   ├── white-text-logo@2x.png
    │   │   └── white-text-logo@3x.png
    ├── extension
    │   ├── background.js
    │   ├── background
    │   │   ├── badge.js
    │   │   ├── contextMenus.js
    │   │   ├── inject.js
    │   │   └── view_styleurl
    │   │   │   └── ViewStyleURL.js
    │   ├── create_styleurl.css
    │   ├── create_styleurl.js
    │   ├── create_styleurl
    │   │   ├── CreateStyleURL.js
    │   │   ├── Gist.css
    │   │   ├── Gist.js
    │   │   ├── fonts.css
    │   │   ├── fonts
    │   │   │   ├── OpenSans-Bold.ttf
    │   │   │   ├── OpenSans-BoldItalic.ttf
    │   │   │   ├── OpenSans-ExtraBold.ttf
    │   │   │   ├── OpenSans-ExtraBoldItalic.ttf
    │   │   │   ├── OpenSans-Italic.ttf
    │   │   │   ├── OpenSans-Light.ttf
    │   │   │   ├── OpenSans-LightItalic.ttf
    │   │   │   ├── OpenSans-Regular.ttf
    │   │   │   ├── OpenSans-SemiBold.ttf
    │   │   │   └── OpenSans-SemiBoldItalic.ttf
    │   │   └── messages.js
    │   ├── css_manager_content_script.js
    │   ├── devtools.js
    │   ├── github_gist_content_script.js
    │   ├── inject_create_styleurl.js
    │   ├── inject_view_styleurl.js
    │   ├── inline_style_observer.js
    │   ├── inline_style_observer
    │   │   ├── inline_style_observer.js
    │   │   └── inline_style_observer_manager.js
    │   ├── lib
    │   │   ├── StyleURLTab.js
    │   │   ├── api.js
    │   │   ├── browserAction.js
    │   │   ├── gists.js
    │   │   ├── injectScriptNames.js
    │   │   ├── injectShadowDom.js
    │   │   ├── makeEverythingImportant.js
    │   │   ├── port.js
    │   │   ├── stylefile.js
    │   │   └── toFile.js
    │   ├── postcss.config.js
    │   ├── stylesheet_manager_content_script.js
    │   ├── version_info.js
    │   └── view_styleurl
    │   │   └── ViewStyleURL.js
    ├── manifest.dev.json
    ├── manifest.prod.json
    └── views
    │   ├── background.pug
    │   ├── create_styleurl.pug
    │   ├── devtools.pug
    │   ├── inject.pug
    │   └── window.pug
├── package.json
├── scripts
    ├── .eslintrc
    ├── build.js
    ├── compress.js
    ├── dev.js
    ├── tasks.js
    └── update-readme.js
├── stats.json
├── webpack
    ├── .eslintrc
    ├── customPublicPath.js
    ├── dev.config.js
    ├── prod.config.js
    ├── replace
    │   ├── JsonpMainTemplate.runtime.js
    │   └── process-update.js
    └── test.config.js
├── yarn-error.log
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | key.pem
2 | node_modules
3 | dev
4 | dist
5 | build
6 | build.zip
7 | credentials.json
8 | releases


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 1.1.15
  2 | 
  3 | Fix bug in feedback box in ViewStyleURL bar
  4 | 
  5 | ## 1.1.14
  6 | 
  7 | The bottom bar is now hidden when in print mode. Thanks whomever wrote in and flagged this issue.
  8 | 
  9 | ## 1.1.13
 10 | 
 11 | StyleURL now supports creating secret gists, so that they don't appear in search or anywhere public. This is now the behavior by default.
 12 | 
 13 | ## 1.1.12
 14 | 
 15 | Fixed issue where navigating around in Reddit sometimes caused a giant diff to appear of changes on the page. This happened because:
 16 | 
 17 | Reddit uses `<style>` which are empty in the DOM, but with rules populated via `insertRule` - https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
 18 | 
 19 | It just so happens that these style tags are not editable from within devtools anyway.
 20 | 
 21 | As part of this, realized that if style tags are added/removed dynamically to the website while devtools is open, StyleURL will think the user changed it instead of the site.
 22 | 
 23 | TODO, these two fixes:
 24 | 
 25 | 1.  Add a MutationObserver for tracking when style tags are added or removed from the DOM, and add the contents of the style tag to TAB_ORIGINAL_STYLES
 26 | 2.  When history state updates, reset devtools.js. Currently, it only does this when you navigate.
 27 | 
 28 | ## 1.1.11
 29 | 
 30 | - On some websites, the code diff text was centered. It should be left aligned. So, I made it left-aligned.
 31 | 
 32 | ## 1.1.10
 33 | 
 34 | - Automatically hide the bottom bar when there are no more CSS changes
 35 | - Include whether in-app feedback is from the view styleurl or the create styleurl bar
 36 | 
 37 | ## 1.1.9
 38 | 
 39 | - Fixed flash of unstyled content when the bar at the bottom loads
 40 | - Added in-app feedback widget to help us improve the product, inspired by the one in the Stripe Dashboard.
 41 | 
 42 | ## 1.1.8
 43 | 
 44 | Bump version of `stylesheet-differ`. This fixes some bugs people were experiencing when viewing the diff.
 45 | 
 46 | ## 1.1.7
 47 | 
 48 | - Hide Intercom **only** when the StyleURL bar is visible in the page because it covers up StyleURL and, for now, it's easier to forcefully hide it than to move it to be above the bar. TODO: observe for the `#intercom-container` selector instead of inserting a style tag when bar appears
 49 | - Add a spacer div to handle a good amount of cases where the bottom of screen is covered up by StyleURL. This won't fix every case, particularly websites like Facebook where the bottom of the screen is something else that's floaty
 50 | 
 51 | ## 1.1.6
 52 | 
 53 | - Add "Share StyleURL" link to GitHub Gist
 54 | - Show error message when devtools isn't open and the user clicks "Share" or "Create Gist"
 55 | 
 56 | ## 1.1.5
 57 | 
 58 | Ignore error causd by tab to not exist when resetting browserAction. This caused other things to break, and is a safe error to silence (famous last words)
 59 | 
 60 | ## 1.1.4
 61 | 
 62 | Fix bug caused in 1.1.3 where the redirect URL was the share URL
 63 | 
 64 | ## 1.1.3
 65 | 
 66 | Fix "Share changes" button on HTTP-only sites
 67 | 
 68 | ## 1.1.2
 69 | 
 70 | Remove console.\*(^[error|log]) in production
 71 | 
 72 | ## 1.1.1
 73 | 
 74 | Remove query string from exported filenames because that's usually just a way to deal with caching and not how filenames are in the filesystem.
 75 | 
 76 | ## 1.1.0
 77 | 
 78 | Improve performance of memoizer slightly
 79 | 
 80 | ## 1.0.9
 81 | 
 82 | Fix issue where stylesheets after page changes on the same tab were being diffed. For example, you'd open Hacker News, edit some styles, click on a link to a page, then it would show all the Hacker News styles being `unset`.
 83 | 
 84 | Now, it clears all the cached styles on `chrome.webNavigation.onCommitted`.
 85 | 
 86 | Additionally:
 87 | 
 88 | - Made the <CodeDiff /> box 400px wide instead of 320px.
 89 | - Made the filenames use "\_" instead of "!" as the replacement character when a character is invalid. For example, before `news.css!asodKPODSAKDPOK.css` and after `news.css_COKASODK.css`
 90 | 
 91 | ## 1.0.8
 92 | 
 93 | Update stylesheet-differ to the latest version, fixing a bad bug.
 94 | 
 95 | ## 1.0.7
 96 | 
 97 | Performance improvements and bug fixes
 98 | 
 99 | ## 1.0.6
100 | 
101 | Bump version.
102 | 
103 | ## 1.0.5
104 | 
105 | Bump version.
106 | 
107 | ## 1.0.4
108 | 
109 | Bump version.
110 | 
111 | ## 1.0.3
112 | 
113 | Bump version.
114 | 
115 | ## 1.0.2
116 | 
117 | Initial Release.
118 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # StyleURL Extension
 2 | 
 3 | [StyleURL](https://www.styleurl.app) is the easiest way for developers & designers to collaborate on CSS changes. This is the source code for the Chrome extension.
 4 | 
 5 | ### What's New (v1.1.15 - August 4, 2018)
 6 | 
 7 | Fix bug in feedback box in ViewStyleURL bar
 8 | 
 9 | ---
10 |     
11 | ## Export CSS from Chrome
12 | 
13 | Make style changes from Chrome Inspector, and StyleURL will show you the diff of your CSS changes in the page.
14 | 
15 | Before StyleURL, to get your CSS tweaks out of Chrome DevTools, you had to select each element, remember what you changed, and copy it to a file. Now, StyleURL will automatically detect all of your changes and show you the diff.
16 | 
17 | ## Save to Gist
18 | 
19 | StyleURL integrates with GitHub Gists so that you can save and share your CSS changes easily. As of August 3rd, StyleURL creates secret gists only.
20 | 
21 | ## Preview live changes from a link
22 | 
23 | Add `?__styleurl=gist_${gistID}` to the URL on a webpage, and it'll automatically load the CSS from the Gist onto that page (so long as there's a matching Stylefile).
24 | 
25 | ## Stylefile - an open standard for user style metadata
26 | 
27 | StyleURL is not the primary storage place for the userstyles. They're currently stored on GitHub as a Gist (more providers could easily be added later). This reduces the dependence of any centralized party for StyleURL to work, giving people better control of their data.
28 | 
29 | Example Stylefile:
30 | 
31 | ```yaml
32 | ---
33 | version: 1.0 # Optional
34 | domains: # Required
35 | - news.ycombinator.com
36 | url_patterns: # Required
37 | - news.ycombinator.com/*
38 | timestamp: '2018-07-27T04:21:42Z' # Optional
39 | id: 6GJP # Optional, not currently used
40 | redirect_url: https://news.ycombinator.com/ # Required
41 | shared_via: StyleURL – import and export CSS changes from Chrome Inspector to a Gist
42 |   you can share (like this one!) # Optional
43 | ```
44 | 
45 | StyleURL generates and uses a Stylefile to:
46 | 
47 | - Detect which pages a StyleURL should be applied to (`url_patterns`)
48 | - Detect which domains a StyleURL correspond to (`domains`)
49 | - When activated from a different page, which absolute URL to redirect to (`redirect_url`)
50 | 
51 | Under the hood, the way this works is:
52 | 
53 | - Given a StyleURL, the extension fetches the corresponding Gist, reads the Stylefile, and if the URL matches the current URL, downloads the stylesheets within the Gist and applies them to the current page.
54 | 
55 | ### Development
56 | 
57 | You'll want to point it to production and make sure chrome://flags/#allow-insecure-localhost is enabled (TODO more words)
58 | 


--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
 1 | environment:
 2 |   matrix:
 3 |     - nodejs_version: '6'
 4 |     - nodejs_version: '7'
 5 | 
 6 | cache:
 7 |   - "%LOCALAPPDATA%/Yarn"
 8 |   - node_modules
 9 | 
10 | install:
11 |   - ps: Install-Product node $env:nodejs_version
12 |   - yarn install
13 | 
14 | test_script:
15 |   - node --version
16 |   - yarn --version
17 |   - yarn run lint
18 |   - yarn test
19 |   - yarn run build
20 | 
21 | build: off
22 | 


--------------------------------------------------------------------------------
/babel.config.dev.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@babel/preset-env"],
3 |   plugins: ["@babel/plugin-transform-runtime"]
4 | };
5 | 


--------------------------------------------------------------------------------
/chrome/app/components/Button.css:
--------------------------------------------------------------------------------
 1 | .Button {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     border-radius: 4px;
 5 |     margin: 8px 0;
 6 |     cursor: pointer;
 7 |     width: auto;
 8 | }
 9 | 
10 | a.Button {
11 |     text-decoration: underline;
12 | }
13 | 
14 | .Button-text {
15 |     font-weight: 600;
16 |     font-size: 14px;
17 |     line-height: 18px;
18 |     user-select: none;
19 | }
20 | 
21 | .Button--size-default {
22 |     padding: 6px 14px;
23 | }
24 | 
25 | a.Button--color-blue,
26 | .Button--color-blue {
27 |     color: white;
28 |     background-color: #5A95FF;
29 | }
30 | 
31 | .Button--color-blue .Button-text {
32 |     color: white;
33 | }
34 | 
35 | .Button--color-black,
36 | a.Button--color-black {
37 |     color: white;
38 |     background-color: #13161B;
39 | }
40 | 
41 | .Button--color-white {
42 |     border: 1px solid #333;
43 | }
44 | 
45 | .Button--color-black .Button-text {
46 |     color: white;
47 | }
48 | 
49 | .Button--color-black:hover {
50 |     filter: invert(5%);
51 | }
52 | 
53 | .Button--color-default {
54 |     color: white;
55 |     background-color: transparent;
56 | }
57 | 
58 | .Button-icon,
59 | .Button-icon svg {
60 |     height: 20px;
61 |     width: 20px;
62 | }
63 | 
64 | .Button-icon {
65 |     margin-right: 4px;
66 | }
67 | 


--------------------------------------------------------------------------------
/chrome/app/components/Button.js:
--------------------------------------------------------------------------------
 1 | import classNames from "classnames";
 2 | import React from "react";
 3 | import "./Button.css";
 4 | 
 5 | export const BUTTON_COLORS = {
 6 |   blue: "blue",
 7 |   black: "black",
 8 |   default: "default",
 9 |   white: "white"
10 | };
11 | 
12 | export const BUTTON_SIZES = {
13 |   default: "default"
14 | };
15 | 
16 | export class Button extends React.Component {
17 |   static defaultProps = {
18 |     size: BUTTON_SIZES.default,
19 |     color: BUTTON_COLORS.default
20 |   };
21 | 
22 |   render() {
23 |     const { children, color, size, icon, onClick, href, download } = this.props;
24 | 
25 |     const ComponentName = href ? "a" : "div";
26 | 
27 |     const child = (
28 |       <React.Fragment>
29 |         {!!icon && <div className="Button-icon">{icon}</div>}
30 |         {!!children && <div className="Button-text">{children}</div>}
31 |       </React.Fragment>
32 |     );
33 | 
34 |     return React.createElement(
35 |       ComponentName,
36 |       {
37 |         onClick,
38 |         href,
39 |         target: href ? "_blank" : undefined,
40 |         className: classNames("Button", {
41 |           "Button--color-blue": BUTTON_COLORS[color] === BUTTON_COLORS.blue,
42 |           "Button--color-black": BUTTON_COLORS[color] === BUTTON_COLORS.black,
43 |           "Button--color-white": BUTTON_COLORS[color] === BUTTON_COLORS.white,
44 |           "Button--color-default":
45 |             BUTTON_COLORS[color] === BUTTON_COLORS.default,
46 |           "Button--size-default": BUTTON_COLORS[size] === BUTTON_SIZES.default
47 |         }),
48 |         download
49 |       },
50 |       child
51 |     );
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/chrome/app/components/CodeDiff.css:
--------------------------------------------------------------------------------
 1 | .CodeDiff {
 2 |     width: 400px;
 3 |     max-width: 100%;
 4 |     overflow-x: hidden;
 5 |     overflow-y: auto;
 6 |     max-height: 240px;
 7 |     text-align: left;
 8 | }
 9 | 
10 | .CodeDiff pre {
11 |     margin: 0;
12 |     padding: 14px 14px !important;
13 | }
14 | 
15 | .CodeDiff pre code:nth-child(1) {
16 |     padding-right: 14px !important;
17 | }
18 | 
19 | .react-syntax-highlighter-line-number {
20 |     user-select: none;
21 | }
22 | 
23 | .CodeDiff > pre {
24 |     background: #21262F !important;
25 | }
26 | 


--------------------------------------------------------------------------------
/chrome/app/components/CodeDiff.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./CodeDiff.css";
 3 | import SyntaxHighlighter from "react-syntax-highlighter";
 4 | import { monokai } from "react-syntax-highlighter/styles/hljs";
 5 | import filenameify from "filenamify";
 6 | 
 7 | const normalizeFilename = _filename => {
 8 |   const queryStringIndex = _filename.indexOf("?");
 9 |   const filename =
10 |     queryStringIndex > -1 ? _filename.substr(0, queryStringIndex) : _filename;
11 | 
12 |   if (!filename.endsWith(".css")) {
13 |     return filenameify(filename + ".css", {
14 |       replacement: "_"
15 |     });
16 |   } else {
17 |     return filenameify(filename, {
18 |       replacement: "_"
19 |     });
20 |   }
21 | };
22 | 
23 | export const concatStylesheets = (stylesheets, includeURL = false) => {
24 |   const code = stylesheets
25 |     .map(
26 |       stylesheet =>
27 |         `/* ${normalizeFilename(stylesheet[0])} */\n\n${stylesheet[1]}`
28 |     )
29 |     .join("\n\n");
30 | 
31 |   if (includeURL) {
32 |     return (
33 |       `/* Page: ${
34 |         window.location.href
35 |       } */\n/* Exported via StyleURL (https://www.styleurl.app) */\n` + code
36 |     );
37 |   } else {
38 |     return code;
39 |   }
40 | };
41 | 
42 | export default class CodeDiff extends React.PureComponent {
43 |   state = {
44 |     code: "",
45 |     stylesheets: []
46 |   };
47 | 
48 |   static getDerivedStateFromProps(props, state) {
49 |     if (props.stylesheets !== state.stylesheets) {
50 |       return {
51 |         code: concatStylesheets(props.stylesheets),
52 |         stylesheets: props.stylesheets.slice()
53 |       };
54 |     } else {
55 |       return {};
56 |     }
57 |   }
58 | 
59 |   render() {
60 |     return (
61 |       <div className="CodeDiff">
62 |         <SyntaxHighlighter
63 |           showLineNumbers
64 |           customStyle={{
65 |             background: "#21262F"
66 |           }}
67 |           language="css"
68 |           style={monokai}
69 |         >
70 |           {this.state.code}
71 |         </SyntaxHighlighter>
72 |       </div>
73 |     );
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/chrome/app/components/Dropdown.css:
--------------------------------------------------------------------------------
 1 | .Dropdown {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .Dropdown-content {
 6 |   padding: 14px 18px;
 7 |   align-items: center;
 8 |   cursor: pointer;
 9 |   white-space: nowrap;
10 |   display: flex;
11 |   color: white;
12 | }
13 | 
14 | .Dropdown-content:hover,
15 | .Dropdown--open .Dropdown-content,
16 | .Dropdown-child {
17 |   background-color: #21262f;
18 | }
19 | 
20 | .Dropdown-title {
21 |   font-weight: 600;
22 |   font-size: 14px;
23 |   line-height: 22px;
24 |   user-select: none;
25 | }
26 | 
27 | .Dropdown-icon {
28 |   margin-right: 8px;
29 |   margin-top: 3px;
30 | }
31 | 
32 | .Dropdown-child {
33 |   position: absolute;
34 |   bottom: 51px;
35 |   right: 0;
36 |   box-shadow: 1px -1px 1px #ccc;
37 | }
38 | 


--------------------------------------------------------------------------------
/chrome/app/components/Dropdown.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Dropdown.css";
 3 | import classNames from "classnames";
 4 | import onClickOutside from "react-onclickoutside";
 5 | 
 6 | class _DropdownChild extends React.Component {
 7 |   handleClickOutside = evt => this.props.hide(evt);
 8 |   handleClick = evt => evt.stopPropagation();
 9 | 
10 |   render() {
11 |     const { children, ...otherProps } = this.props;
12 | 
13 |     return (
14 |       <div onClick={this.handleClick} className="Dropdown-child">
15 |         {children}
16 |       </div>
17 |     );
18 |   }
19 | }
20 | 
21 | const DropdownChild = onClickOutside(_DropdownChild, {
22 |   excludeScrollbar: true
23 | });
24 | 
25 | class Dropdown extends React.Component {
26 |   state = {
27 |     isOpen: false
28 |   };
29 | 
30 |   handleToggleOpen = evt => {
31 |     if (this.props.onClick) {
32 |       this.props.onClick();
33 |     } else if (this.props.children) {
34 |       const isOpen = !this.state.isOpen;
35 |       this.setState({ isOpen });
36 |       if (this.props.onToggle) {
37 |         this.props.onToggle(isOpen);
38 |       }
39 |     }
40 |   };
41 |   // Do slight delay here as hack to account for previous button click
42 |   handleClickOutside = evt => {
43 |     if (this.state.isOpen) {
44 |       this.setState({ isOpen: false });
45 |     }
46 |   };
47 | 
48 |   setDropdownRef = dropdownRef => (this.dropdownRef = dropdownRef);
49 | 
50 |   render() {
51 |     const { icon, title, children } = this.props;
52 |     const { isOpen } = this.state;
53 | 
54 |     return (
55 |       <div
56 |         ref={this.setDropdownRef}
57 |         className={classNames("Dropdown", "ignore-react-onclickoutside", {
58 |           "Dropdown--open": !!this.state.isOpen,
59 |           "Dropdown--closed": !this.state.isOpen
60 |         })}
61 |       >
62 |         <div onClick={this.handleToggleOpen} className="Dropdown-content">
63 |           {icon && <div className="Dropdown-icon">{icon}</div>}
64 |           {title && <div className="Dropdown-title">{title}</div>}
65 |         </div>
66 | 
67 |         {isOpen ? (
68 |           <DropdownChild hide={this.handleClickOutside}>
69 |             {children}
70 |           </DropdownChild>
71 |         ) : null}
72 |       </div>
73 |     );
74 |   }
75 | }
76 | 
77 | export default Dropdown;
78 | 


--------------------------------------------------------------------------------
/chrome/app/components/FeedbackForm.css:
--------------------------------------------------------------------------------
  1 | .FeedbackFormContainer {
  2 |     display: block;
  3 |     position: relative;
  4 |     white-space: nowrap;
  5 |     margin-left: 14px;
  6 | }
  7 | 
  8 | .FeedbackForm-placeholder,
  9 | .FeedbackForm-input {
 10 |     opacity: 1;
 11 |     border-radius: 4px;
 12 | }
 13 | 
 14 | .FeedbackForm--collapsed .FeedbackForm-input,
 15 | .FeedbackForm--expanded .FeedbackForm-placeholder {
 16 |     opacity: 0;
 17 |     transition: 0.2s opacity linear;
 18 |     pointer-events: none;
 19 | }
 20 | 
 21 | .FeedbackForm--expanded .FeedbackForm-input,
 22 | .FeedbackForm--collapsed .FeedbackForm-placeholder {
 23 |     opacity: 1;
 24 |     pointer-events: auto;
 25 |     transition: 0.2s opacity linear;
 26 | }
 27 | 
 28 | .FeedbackForm-input {
 29 |     position: absolute;
 30 |     bottom: 0px;
 31 |     left: 0;
 32 |     padding: 14px;
 33 |     background-color: white;
 34 |     border: 1px solid #e9ebf5;
 35 |     box-shadow: 0 0 20px 0 rgba(161, 166, 187, 0.35);
 36 |     width: 300px;
 37 |     flex-direction: column;
 38 | }
 39 | 
 40 | .FeedbackForm-copy {
 41 |     margin-top: 7px;
 42 |     color: #3B55E6;
 43 |     margin-bottom: 7px;
 44 | }
 45 | 
 46 | .FeedbackInput {
 47 |     margin: -7px -14px;
 48 |     padding: 7px 14px;
 49 |     font-family: "Open Sans", sans-serif;
 50 |     border-top-left-radius: 4px;
 51 |     border-top-right-radius: 4px;
 52 |     font-size: 14px;
 53 |     color: #333;
 54 |     line-height: 18px;
 55 |     appearance: none;
 56 |     border: 0;
 57 |     resize: none;
 58 |     outline: none;
 59 |     box-shadow: none;
 60 |     width: 100%;
 61 | }
 62 | 
 63 | .FeedbackForm-placeholder {
 64 |     background-color: #fcfcfc;
 65 |     align-items: center;
 66 |     padding: 7px 14px;
 67 |     justify-content: center;
 68 |     border: 1px solid #e9ebf5;
 69 |     display: flex;
 70 | }
 71 | 
 72 | .FeedbackForm-placeholder .Icon {
 73 |     display: flex;
 74 |     margin-top: auto;
 75 |     margin-bottom: auto;
 76 | }
 77 | 
 78 | .FeedbackForm-inputButtons {
 79 |     display: flex;
 80 |     justify-content: space-between;
 81 | }
 82 | 
 83 | .Icon {
 84 |     margin-right: 8px;
 85 | }
 86 | 
 87 | .FeedbackForm-inputButtons .Button {
 88 |     margin: 0;
 89 |     color: black;
 90 | }
 91 | 
 92 | .FeedbackForm-input {
 93 |     margin: 0;
 94 | }
 95 | 
 96 | @media (max-width: 1000px) {
 97 |     .FeedbackForm-placeholder > .FeedbackForm-title {
 98 |         display: none;
 99 |     }
100 | 
101 |     .FeedbackForm-placeholder {
102 |         background: transparent;
103 |         padding: 0;
104 |         border: 0;
105 |     }
106 | }
107 | 


--------------------------------------------------------------------------------
/chrome/app/components/FeedbackForm.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { Icon } from "./Icon";
  3 | import onClickOutside from "react-onclickoutside";
  4 | import classNames from "classnames";
  5 | import { Button } from "./Button";
  6 | import "./FeedbackForm.css";
  7 | 
  8 | class FeedbackForm extends React.Component {
  9 |   constructor(props) {
 10 |     super(props);
 11 | 
 12 |     this.state = {
 13 |       isExpanded: false,
 14 |       message: "",
 15 |       isSaving: false,
 16 |       hasSaved: false
 17 |     };
 18 |   }
 19 | 
 20 |   handleClickOutside = () => {
 21 |     if (this.state.isExpanded) {
 22 |       this.setState({ isExpanded: false });
 23 |     }
 24 |   };
 25 | 
 26 |   setExpanded = isExpanded => {
 27 |     this.setState({ isExpanded });
 28 |     if (isExpanded && this.inputRef) {
 29 |       this.inputRef.focus();
 30 |     }
 31 |   };
 32 |   handleCancel = () => this.setState({ isExpanded: false });
 33 |   handleSubmit = evt => {
 34 |     evt.preventDefault();
 35 |     this.props.onSendFeedback(this.state.message);
 36 |     this.setState({ message: "", isExpanded: false });
 37 |     alert("Thanks! Your feedback has been sent.");
 38 |   };
 39 | 
 40 |   disablePropagation = evt => {
 41 |     evt.stopPropagation();
 42 | 
 43 |     evt.nativeEvent.stopImmediatePropagation();
 44 |   };
 45 | 
 46 |   handleKeyDown = evt => {
 47 |     this.disablePropagation(evt);
 48 | 
 49 |     if (evt.keyCode === 27) {
 50 |       this.handleCancel();
 51 |     }
 52 |   };
 53 | 
 54 |   handleMessageChange = evt => this.setState({ message: evt.target.value });
 55 | 
 56 |   render() {
 57 |     const { isExpanded, message } = this.state;
 58 | 
 59 |     return (
 60 |       <div
 61 |         className="FeedbackFormContainer"
 62 |         onClick={() => this.setExpanded(true)}
 63 |       >
 64 |         <div
 65 |           className={classNames("FeedbackForm", {
 66 |             "FeedbackForm--expanded": isExpanded,
 67 |             "FeedbackForm--collapsed": !isExpanded
 68 |           })}
 69 |         >
 70 |           <div className="FeedbackForm-placeholder">
 71 |             <div className="Icon">
 72 |               <Icon
 73 |                 width="14"
 74 |                 height="14"
 75 |                 name="feedback"
 76 |                 size="16px"
 77 |                 color="#B9BED1"
 78 |               />
 79 |             </div>
 80 | 
 81 |             <div className="FeedbackForm-title">
 82 |               Have feedback or questions?
 83 |             </div>
 84 |           </div>
 85 | 
 86 |           <form
 87 |             className="FeedbackForm-input"
 88 |             onClick={this.disablePropagation}
 89 |             onSubmit={this.handleSubmit}
 90 |           >
 91 |             <textarea
 92 |               required
 93 |               name="feedback"
 94 |               className="FeedbackInput"
 95 |               value={message}
 96 |               rows="3"
 97 |               ref={inputRef => (this.inputRef = inputRef)}
 98 |               placeholder="Have feedback or questions?"
 99 |               onKeyDown={this.handleKeyDown}
100 |               onChange={this.handleMessageChange}
101 |             />
102 | 
103 |             <div className="FeedbackForm-copy">
104 |               Your feedback is sent directly to the founders.
105 |             </div>
106 | 
107 |             <div className="FeedbackForm-inputButtons">
108 |               <Button onClick={this.handleCancel} color="white">
109 |                 Cancel
110 |               </Button>
111 |               <Button onClick={this.handleSubmit} color="black">
112 |                 Send feedback
113 |               </Button>
114 |             </div>
115 |           </form>
116 |         </div>
117 |       </div>
118 |     );
119 |   }
120 | }
121 | 
122 | export default onClickOutside(FeedbackForm);
123 | 


--------------------------------------------------------------------------------
/chrome/app/components/HeaderBar.css:
--------------------------------------------------------------------------------
 1 | .HeaderBar {
 2 |   background-color: #13161b;
 3 |   padding: 0 28px;
 4 |   display: grid;
 5 |   grid-template-columns: 1fr 1fr 1fr;
 6 |   grid-template-rows: auto;
 7 |   align-items: center;
 8 |   width: auto;
 9 |   opacity: 1;
10 | }
11 | 
12 | .HeaderSide {
13 |   display: flex;
14 |   align-items: center;
15 | }
16 | 
17 | .HeaderBar--hidden {
18 |   opacity: 0;
19 |   pointer-events: none;
20 | }
21 | 
22 | @media (max-width: 780px) {
23 |   .HeaderBar--logo {
24 |     display: none;
25 |   }
26 | }
27 | 
28 | .HeaderSide--right {
29 |   justify-content: flex-end;
30 | }
31 | 
32 | .HeaderSide--center {
33 |   justify-content: center;
34 | }
35 | 
36 | .HeaderBar-hideButton {
37 |   margin-right: 14px;
38 |   color: gray;
39 |   cursor: pointer;
40 |   margin-top: auto;
41 |   margin-bottom: auto;
42 | }
43 | 
44 | .HeaderBar-hideButton:hover {
45 |   color: white;
46 | }
47 | 


--------------------------------------------------------------------------------
/chrome/app/components/HeaderBar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./HeaderBar.css";
 3 | import WhiteTextLogo from "./WhiteTextLogo";
 4 | import classNames from "classnames";
 5 | import { Icon } from "./Icon";
 6 | import FeedbackForm from "./FeedbackForm";
 7 | 
 8 | export class HeaderBar extends React.Component {
 9 |   static defaultProps = {
10 |     hidden: false
11 |   };
12 | 
13 |   render() {
14 |     const {
15 |       hidden,
16 |       onHide,
17 |       center,
18 |       className,
19 |       children,
20 |       onSendFeedback
21 |     } = this.props;
22 |     return (
23 |       <header
24 |         className={classNames("HeaderBar", className, {
25 |           "HeaderBar--hidden": hidden
26 |         })}
27 |       >
28 |         <div className="HeaderSide HeaderSide--left">
29 |           <div onClick={onHide} className="HeaderBar-hideButton">
30 |             <Icon height="20" name="close" />
31 |           </div>
32 |           <WhiteTextLogo className="HeaderBar--logo" />
33 |           <FeedbackForm onSendFeedback={onSendFeedback} />
34 |         </div>
35 | 
36 |         <div className="HeaderSide HeaderSide--center">{center}</div>
37 | 
38 |         <div className="HeaderSide HeaderSide--right">{children}</div>
39 |       </header>
40 |     );
41 |   }
42 | }
43 | 
44 | export default HeaderBar;
45 | 


--------------------------------------------------------------------------------
/chrome/app/components/Icon.css:
--------------------------------------------------------------------------------
1 | .IconFill {
2 |     fill: currentColor;
3 | }
4 | 
5 | .IconStroke {
6 |     stroke: currentColor;
7 | }
8 | 


--------------------------------------------------------------------------------
/chrome/app/components/Icon.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Icon.css";
 3 | 
 4 | const FeedbackIcon = ({ width, height, ...otherProps }) => (
 5 |   <svg width={width} height={height} {...otherProps} viewBox="0 0 22 22">
 6 |     <path
 7 |       d="M0 1v19.753a1 1 0 0 0 1.67.743l3.301-2.974H21a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1zm5.891 3.14h4.19a.92.92 0 1 1 0 1.84H5.89a.92.92 0 1 1 0-1.84zm-.92 9.592a.92.92 0 0 1 .92-.92h8.14a.92.92 0 1 1 0 1.84h-8.14a.92.92 0 0 1-.92-.92zm11.138-3.416H5.891a.92.92 0 0 1 0-1.84H16.11a.92.92 0 1 1 0 1.84z"
 8 |       fillRule="nonzero"
 9 |       className="IconFill"
10 |     />
11 |   </svg>
12 | );
13 | 
14 | const ExportIcon = ({ width, height, ...otherProps }) => (
15 |   <svg width={width} height={height} viewBox="0 0 37 36">
16 |     <g className="IconFill" fillRule="evenodd">
17 |       <path d="M25.542 13.014v4h6.96v14.899H4.003v-14.9h6.96v-4H.003v22.9h36.499v-22.9z" />
18 |       <path d="M16.252 7.834v19.41h4V7.568l2.694 2.694 2.828-2.828-7.388-7.39L10.73 7.7l2.828 2.828z" />
19 |     </g>
20 |   </svg>
21 | );
22 | 
23 | const CodeIcon = ({ width, height, ...otherProps }) => (
24 |   <svg {...otherProps} width={width} height={height} viewBox=" 0 0 32 20">
25 |     <path
26 |       d="M18.427.001c-.503.02-.933.359-1.059.833l-4.95 17.754c-.109.385.001.797.29 1.08.288.284.71.397 1.108.295.397-.1.708-.4.816-.785l4.95-17.755c.104-.345.03-.718-.2-1A1.157 1.157 0 0 0 18.428 0zM10.17 1.862a1.16 1.16 0 0 0-.595.243L.437 9.133c-.276.21-.437.532-.437.873 0 .34.161.662.437.872l9.138 7.028c.32.25.754.314 1.137.168.382-.146.655-.48.715-.875a1.1 1.1 0 0 0-.424-1.038l-8.008-6.15 8.008-6.16a1.09 1.09 0 0 0 .372-1.306 1.147 1.147 0 0 0-1.205-.683zm11.399 0a1.134 1.134 0 0 0-.982.806c-.126.439.037.907.41 1.183l8.008 6.16-8.008 6.15a1.1 1.1 0 0 0-.424 1.038c.06.395.333.729.715.875.383.146.816.082 1.137-.168l9.138-7.028c.276-.21.437-.532.437-.872 0-.34-.161-.663-.437-.873l-9.138-7.028c-.24-.19-.549-.278-.856-.243z"
27 |       className="IconFill"
28 |       fillRule="nonzero"
29 |     />
30 |   </svg>
31 | );
32 | 
33 | const ForkIcon = ({ width, height, ...otherProps }) => (
34 |   <svg {...otherProps} width={width} height={height} viewBox="0 0 20 26">
35 |     <g className="IconFill IconStroke" fillRule="nonzero">
36 |       <path d="M3.832 6.84h1.032v9.307H3.832z" />
37 |       <path d="M4.335 7.347c-1.694 0-3.097-1.387-3.097-3.12a3.09 3.09 0 0 1 3.097-3.094c1.694 0 3.097 1.387 3.097 3.12a3.09 3.09 0 0 1-3.097 3.094zm0-5.174a2.075 2.075 0 0 0-2.064 2.08c0 1.147.926 2.08 2.064 2.08A2.075 2.075 0 0 0 6.4 4.253c0-1.146-.926-2.08-2.065-2.08zM15.665 7.347c-1.694 0-3.097-1.387-3.097-3.12a3.09 3.09 0 0 1 3.097-3.094c1.694 0 3.097 1.387 3.097 3.12a3.09 3.09 0 0 1-3.097 3.094zm0-5.174a2.075 2.075 0 0 0-2.065 2.08c0 1.147.926 2.08 2.065 2.08a2.075 2.075 0 0 0 2.064-2.08c0-1.146-.926-2.08-2.064-2.08zM4.335 24.973c-1.694 0-3.097-1.386-3.097-3.12a3.096 3.096 0 0 1 3.097-3.12 3.096 3.096 0 0 1 3.097 3.12c0 1.734-1.403 3.12-3.097 3.12zm0-5.2a2.075 2.075 0 0 0-2.064 2.08c0 1.147.926 2.08 2.064 2.08a2.075 2.075 0 0 0 2.065-2.08c0-1.146-.926-2.08-2.065-2.08z" />
38 |       <path d="M4.838 19.24H3.806v-3.093c0-2.587 2.065-4.667 4.632-4.667h3.097c1.986 0 3.6-1.627 3.6-3.627V6.84h1.033v1.013c0 2.587-2.065 4.667-4.633 4.667h-3.07c-1.986 0-3.6 1.627-3.6 3.627l-.027 3.093z" />
39 |     </g>
40 |   </svg>
41 | );
42 | 
43 | const ShareIcon = ({ width, height, ...otherProps }) => (
44 |   <svg {...otherProps} viewBox="0 0 24 21" width={width} height={height}>
45 |     <path
46 |       d="M23.61 7.399L15.36.274c-.722-.623-1.86-.117-1.86.852v3.752C5.97 4.964 0 6.473 0 13.61c0 2.88 1.855 5.733 3.906 7.225.64.465 1.552-.119 1.316-.873-2.125-6.798 1.008-8.602 8.278-8.707v4.121c0 .97 1.14 1.474 1.86.851l8.25-7.125a1.125 1.125 0 0 0 0-1.702z"
47 |       className="IconFill"
48 |       fillRule="nonzero"
49 |     />
50 |   </svg>
51 | );
52 | 
53 | const CloseIcon = ({ width, height, ...otherProps }) => (
54 |   <svg {...otherProps} width={width} height={height} viewBox="0 0 100 100">
55 |     <path
56 |       className="IconFill"
57 |       d="M72.9 11.5L50 34.4 27.1 11.5c-2.9-2.9-7.7-2.9-10.6 0l-4.2 4.2c-2.9 2.9-2.9 7.7 0 10.6l22.9 22.9-23 23c-2.9 2.9-2.9 7.7 0 10.6l4.2 4.2c2.9 2.9 7.7 2.9 10.6 0l23-22.9L72.9 87c2.9 2.9 7.7 2.9 10.6 0l4.2-4.2c2.9-2.9 2.9-7.7 0-10.6L64.8 49.3l22.9-22.9c2.9-2.9 2.9-7.7 0-10.6l-4.2-4.2c-2.9-3-7.6-3-10.6-.1z"
58 |     />
59 |   </svg>
60 | );
61 | 
62 | const ICON_BY_NAME = {
63 |   fork: ForkIcon,
64 |   close: CloseIcon,
65 |   code: CodeIcon,
66 |   share: ShareIcon,
67 |   export: ExportIcon,
68 |   feedback: FeedbackIcon
69 | };
70 | 
71 | export const Icon = ({ width, height, color, name, ...otherProps }) => {
72 |   const IconComponent = ICON_BY_NAME[name];
73 | 
74 |   return (
75 |     <IconComponent
76 |       style={color ? { color } : undefined}
77 |       {...otherProps}
78 |       width={width}
79 |       height={height}
80 |     />
81 |   );
82 | };
83 | 
84 | export default Icon;
85 | 


--------------------------------------------------------------------------------
/chrome/app/components/StylesheetCodePreview.css:
--------------------------------------------------------------------------------
 1 | .StylesheetCodePreview {
 2 |     border-top-left-radius: 2px;
 3 |     border-top-right-radius: 2px;
 4 |     overflow: hidden;
 5 | }
 6 | 
 7 | .StylesheetCodePreview-Actions {
 8 |     text-align: center;
 9 |     display: flex;
10 |     justify-content: center;
11 | }
12 | 
13 | .StylesheetCodePreview-Actions a.Button {
14 |     width: 100%;
15 |     justify-content: center;
16 |     margin: 0;
17 |     padding-top: 10px;
18 |     padding-bottom: 10px;
19 |     color: white !important;
20 | }
21 | 


--------------------------------------------------------------------------------
/chrome/app/components/StylesheetCodePreview.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, BUTTON_COLORS } from "./Button";
 3 | import "./StylesheetCodePreview.css";
 4 | import { getFilename } from "../../extension/create_styleurl/CreateStyleURL";
 5 | import CodeDiff, { concatStylesheets } from "./CodeDiff";
 6 | 
 7 | const buildViewURL = gistId => {
 8 |   return `https://gist.github.com/${gistId}`;
 9 | };
10 | 
11 | const buildDlUrl = stylesheets => {
12 |   const blob = new Blob([concatStylesheets(stylesheets, true)], {
13 |     type: "text/plain;charset=UTF-8"
14 |   });
15 |   return window.URL.createObjectURL(blob);
16 | };
17 | 
18 | export class StylesheetCodePreview extends React.PureComponent {
19 |   render() {
20 |     const { gistId, stylesheets } = this.props;
21 |     return (
22 |       <div className="StylesheetCodePreview ignore-react-onclickoutside">
23 |         <CodeDiff stylesheets={stylesheets} />
24 |         <div className="StylesheetCodePreview-Actions">
25 |           <Button color={BUTTON_COLORS.black} href={buildViewURL(gistId)}>
26 |             Open gist
27 |           </Button>
28 |           <Button
29 |             color={BUTTON_COLORS.black}
30 |             href={buildDlUrl(stylesheets)}
31 |             download={getFilename()}
32 |           >
33 |             Download
34 |           </Button>
35 |         </div>
36 |       </div>
37 |     );
38 |   }
39 | }
40 | 
41 | export default StylesheetCodePreview;
42 | 


--------------------------------------------------------------------------------
/chrome/app/components/Switcher.css:
--------------------------------------------------------------------------------
 1 | .Switcher,
 2 | .SwitcherSide,
 3 | .SwitcherSide-label {
 4 |   display: flex;
 5 |   align-items: center;
 6 | }
 7 | 
 8 | .Switcher,
 9 | .SwitcherSide {
10 |   border-radius: 100px;
11 | }
12 | 
13 | .Switcher {
14 |   justify-content: space-between;
15 |   align-self: center;
16 |   background-color: white;
17 |   cursor: pointer;
18 | }
19 | 
20 | @media (max-width: 650px) {
21 |   .Switcher {
22 |     display: none;
23 |   }
24 | }
25 | 
26 | .SwitcherSide {
27 |   width: 152px;
28 |   padding: 8px 0;
29 |   text-align: center;
30 |   justify-content: center;
31 |   color: #050505;
32 | }
33 | 
34 | .Switcher--on .SwitcherSide--on,
35 | .Switcher--off .SwitcherSide--off {
36 |   background-color: #5a95ff;
37 |   color: white;
38 | }
39 | 
40 | .SwitcherSide-label {
41 |   color: inherit;
42 |   font-size: 14px;
43 |   font-weight: 600px;
44 |   line-height: 19px;
45 |   user-select: none;
46 | }
47 | 


--------------------------------------------------------------------------------
/chrome/app/components/Switcher.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import classNames from "classnames";
 3 | import "./Switcher.css";
 4 | 
 5 | export class Switcher extends React.PureComponent {
 6 |   handleToggle = () => this.props.onChange(!this.props.on);
 7 | 
 8 |   render() {
 9 |     const { onLabel, offLabel, on } = this.props;
10 |     return (
11 |       <div
12 |         onClick={this.handleToggle}
13 |         className={classNames("Switcher", {
14 |           "Switcher--on": !!on,
15 |           "Switcher--off": !on
16 |         })}
17 |       >
18 |         <div className="SwitcherSide SwitcherSide--on">
19 |           <div className="SwitcherSide-label">{onLabel}</div>
20 |         </div>
21 | 
22 |         <div className="SwitcherSide SwitcherSide--off">
23 |           <div className="SwitcherSide-label">{offLabel}</div>
24 |         </div>
25 |       </div>
26 |     );
27 |   }
28 | }
29 | 
30 | export default Switcher;
31 | 


--------------------------------------------------------------------------------
/chrome/app/components/WhiteTextLogo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const getSrcForSize = multipler => {
 4 |   if (!multipler || multipler < 2) {
 5 |     return chrome.extension.getURL("img/white-text-logo.png");
 6 |   } else {
 7 |     return chrome.extension.getURL(`img/white-text-logo@${multipler}x.png`);
 8 |   }
 9 | };
10 | 
11 | const getSrcSet = () =>
12 |   [1, 2, 3].map(size => `${getSrcForSize(size)} ${size}x`).join(", \n");
13 | 
14 | export default ({ src, srcSet, ...otherProps }) => (
15 |   <a
16 |     href={`${__FRONTEND_HOST__}/?utm_source="ext_logo_button"`}
17 |     target="_blank"
18 |   >
19 |     <img
20 |       {...otherProps}
21 |       src={getSrcForSize()}
22 |       srcSet={getSrcSet()}
23 |       height={22.4}
24 |       width={60.8}
25 |       style={{
26 |         userSelect: "none",
27 |         MozUserSelect: "none",
28 |         WebkitUserSelect: "none"
29 |       }}
30 |     />
31 |   </a>
32 | );
33 | 


--------------------------------------------------------------------------------
/chrome/assets/img/default_128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/default_128x128.png


--------------------------------------------------------------------------------
/chrome/assets/img/default_16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/default_16x16.png


--------------------------------------------------------------------------------
/chrome/assets/img/default_19x19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/default_19x19.png


--------------------------------------------------------------------------------
/chrome/assets/img/default_38x38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/default_38x38.png


--------------------------------------------------------------------------------
/chrome/assets/img/default_48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/default_48x48.png


--------------------------------------------------------------------------------
/chrome/assets/img/plus_128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/plus_128x128.png


--------------------------------------------------------------------------------
/chrome/assets/img/plus_16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/plus_16x16.png


--------------------------------------------------------------------------------
/chrome/assets/img/plus_19x19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/plus_19x19.png


--------------------------------------------------------------------------------
/chrome/assets/img/plus_38x38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/plus_38x38.png


--------------------------------------------------------------------------------
/chrome/assets/img/plus_48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/plus_48x48.png


--------------------------------------------------------------------------------
/chrome/assets/img/white-text-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/white-text-logo.png


--------------------------------------------------------------------------------
/chrome/assets/img/white-text-logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/white-text-logo@2x.png


--------------------------------------------------------------------------------
/chrome/assets/img/white-text-logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/assets/img/white-text-logo@3x.png


--------------------------------------------------------------------------------
/chrome/extension/background.js:
--------------------------------------------------------------------------------
  1 | import Messenger from "chrome-ext-messenger";
  2 | import _ from "lodash";
  3 | import memoizee from "memoizee";
  4 | import Raven from "raven-js";
  5 | import _diffSheet from "stylesheet-differ";
  6 | import {
  7 |   injectCreateStyleURLBar,
  8 |   injectCSSManager,
  9 |   injectViewStyleURLBar
 10 | } from "./background/inject";
 11 | import {
 12 |   SCREENSHOT_CONTENT_TYPE,
 13 |   uploadScreenshot,
 14 |   uploadStylesheets,
 15 |   sendFeedback
 16 | } from "./lib/api";
 17 | import {
 18 |   BROWSER_ACTION_STATES,
 19 |   DEFAULT_ICON_PATH,
 20 |   getBrowserActionState,
 21 |   setBrowserActionToDefault,
 22 |   setBrowserActionToStyleApplied
 23 | } from "./lib/browserAction";
 24 | import { getGistIDFromURL, SPECIAL_QUERY_PARAMS } from "./lib/gists";
 25 | import injectScriptNames from "./lib/injectScriptNames";
 26 | import { MESSAGE_TYPES, PORT_TYPES } from "./lib/port";
 27 | import {
 28 |   startMonitoringTabID,
 29 |   stopMonitoringTabID as _stopMonitoringTabID,
 30 |   styleURLsForTabId
 31 | } from "./lib/StyleURLTab";
 32 | import { toFile } from "./lib/toFile";
 33 | 
 34 | const diffSheet = memoizee(_diffSheet, {
 35 |   maxAge: 300000, // 5 minutes,
 36 |   primitive: true
 37 | });
 38 | 
 39 | Raven.config(
 40 |   "https://26483721d124446bb37ebe913d3b8347@sentry.io/1246693"
 41 | ).install();
 42 | 
 43 | Raven.setExtraContext({
 44 |   version: chrome.runtime.getManifest().version,
 45 |   environment: process.env.NODE_ENV
 46 | });
 47 | 
 48 | Raven.context(function() {
 49 |   let DEVTOOLS_OPEN_TABS = {};
 50 |   let devtoolConnection;
 51 |   let gistConnection;
 52 |   let stylesheetManagerConnection;
 53 |   let inlineStyleObserverConnection;
 54 |   let inlineHeaderConnection;
 55 |   const messenger = new Messenger();
 56 | 
 57 |   messenger.initBackgroundHub({
 58 |     connectedHandler: function(extensionPart, connectionName, tabId) {
 59 |       if (extensionPart === "devtool") {
 60 |         DEVTOOLS_OPEN_TABS[tabId] = true;
 61 |       }
 62 |     },
 63 |     disconnectedHandler: function(extensionPart, connectionName, tabId) {
 64 |       if (
 65 |         extensionPart === "devtool" &&
 66 |         getBrowserActionState() === BROWSER_ACTION_STATES.upload_style
 67 |       ) {
 68 |         setBrowserActionToDefault({ tabId });
 69 |       }
 70 | 
 71 |       if (extensionPart === "devtool") {
 72 |         DEVTOOLS_OPEN_TABS[tabId] = false;
 73 |       }
 74 | 
 75 |       if (
 76 |         extensionPart === "devtool" &&
 77 |         tabId &&
 78 |         !styleURLsForTabId(tabId).length
 79 |       ) {
 80 |         inlineStyleObserverConnection.sendMessage(
 81 |           `content_script:${PORT_TYPES.inline_style_observer}:${tabId}`,
 82 |           {
 83 |             kind: MESSAGE_TYPES.stop_observing_inline_styles
 84 |           }
 85 |         );
 86 |       }
 87 |     }
 88 |   });
 89 | 
 90 |   const log = (...messages) =>
 91 |     console.log.apply(console, ["[Background]", ...messages]);
 92 | 
 93 |   const TAB_IDS_TO_APPLY_STYLES = {};
 94 |   const TAB_IDS_STYLESHEET_DIFFS = {};
 95 |   const TAB_ORIGINAL_STYLES = {};
 96 |   const LAST_RECEIVED_TAB_ORIGINAL_STYLES = {};
 97 | 
 98 |   const stopMonitoringTabID = tabId => {
 99 |     _stopMonitoringTabID(tabId);
100 | 
101 |     delete TAB_IDS_STYLESHEET_DIFFS[tabId];
102 |     delete TAB_ORIGINAL_STYLES[tabId];
103 |     delete TAB_ORIGINAL_STYLES[tabId];
104 |     delete LAST_RECEIVED_TAB_ORIGINAL_STYLES[tabId];
105 |   };
106 | 
107 |   const getTab = tabId =>
108 |     new Promise((resolve, reject) => {
109 |       chrome.tabs.get(tabId, resolve);
110 |     });
111 | 
112 |   const getTabId = sender => parseInt(_.last(sender.split("::")), 10);
113 | 
114 |   const handleGistContentScriptMessages = async (
115 |     request,
116 |     from,
117 |     sender,
118 |     sendResponse
119 |   ) => {
120 |     const { kind = null } = request;
121 | 
122 |     const kinds = MESSAGE_TYPES;
123 | 
124 |     if (!kind) {
125 |       return;
126 |     }
127 | 
128 |     if (!_.values(kinds).includes(kind)) {
129 |       console.error(
130 |         "[background] request kind must be one of",
131 |         _.values(kinds)
132 |       );
133 |       return;
134 |     }
135 | 
136 |     if (kind === kinds.get_gist_content) {
137 |       if (!request.url) {
138 |         console.error("[background] invalid get_gist_content: missing url");
139 |         sendResponse({ success: false });
140 |         return;
141 |       }
142 | 
143 |       return window
144 |         .fetch(request.url, {
145 |           redirect: "follow",
146 |           credentials: "include"
147 |         })
148 |         .then(response => response.text())
149 |         .then(value => {
150 |           return sendResponse({
151 |             url: request.url,
152 |             response: true,
153 |             value
154 |           });
155 |         });
156 |     }
157 |   };
158 | 
159 |   const shouldAssumeChangesAreReal = tabId => {
160 |     return (
161 |       LAST_RECEIVED_TAB_ORIGINAL_STYLES[tabId] &&
162 |       new Date().getTime() - LAST_RECEIVED_TAB_ORIGINAL_STYLES[tabId] > 5000
163 |     );
164 |   };
165 | 
166 |   const toggleStylebar = (tabId, show) => {
167 |     const script = (idName, opacity) => {
168 |       document.getElementById(idName).style.opacity = opacity;
169 |     };
170 | 
171 |     return new Promise(resolve => {
172 |       chrome.tabs.executeScript(
173 |         tabId,
174 |         {
175 |           code: `(${script.toString()})("${
176 |             injectScriptNames.inject_create_styleurl
177 |           }", ${show ? 1 : 0})`,
178 |           runAt: "document_start"
179 |         },
180 |         () => {
181 |           setTimeout(() => {
182 |             resolve();
183 |           }, 50);
184 |         }
185 |       );
186 |     });
187 |   };
188 | 
189 |   const sendStyleURLsToTab = ({ tabId }) => {
190 |     styleURLsForTabId(tabId).forEach(styleurl => {
191 |       stylesheetManagerConnection.sendMessage(
192 |         `content_script:${PORT_TYPES.stylesheet_manager}:${tabId}`,
193 |         { kind: MESSAGE_TYPES.get_styleurl, value: styleurl.toJSON() }
194 |       );
195 |     });
196 |   };
197 | 
198 |   const autodetectStyleURL = async ({ url, tabId }) => {
199 |     const gistId = getGistIDFromURL(url);
200 | 
201 |     if (!gistId) {
202 |       return;
203 |     }
204 | 
205 |     await startMonitoringTabID({ tabId, gistId });
206 |     sendStyleURLsToTab({ tabId });
207 | 
208 |     injectCSSManager(tabId);
209 |   };
210 | 
211 |   const handleInlineStyleObserverMessages = async (
212 |     request,
213 |     from,
214 |     sender,
215 |     sendResponse
216 |   ) => {
217 |     const { kind = null } = request;
218 |     const kinds = MESSAGE_TYPES;
219 | 
220 |     if (!kind) {
221 |       return;
222 |     }
223 | 
224 |     if (!_.values(kinds).includes(kind)) {
225 |       console.error(
226 |         "[background] request kind must be one of",
227 |         _.values(kinds)
228 |       );
229 |       return;
230 |     }
231 | 
232 |     const tabId = getTabId(from);
233 |     const tab = await getTab(tabId);
234 | 
235 |     if (
236 |       kind === MESSAGE_TYPES.style_diff_changed &&
237 |       !styleURLsForTabId(tabId).length
238 |     ) {
239 |       injectCreateStyleURLBar(tabId, success => {
240 |         if (!success) {
241 |           return;
242 |         }
243 | 
244 |         inlineHeaderConnection.sendMessage(
245 |           `content_script:${PORT_TYPES.inline_header}:${tabId}`,
246 |           {
247 |             kind: MESSAGE_TYPES.open_style_editor
248 |           }
249 |         );
250 |       });
251 |     }
252 |     log(request.value);
253 |   };
254 | 
255 |   const handleInlineHeaderMessages = async (
256 |     request,
257 |     from,
258 |     sender,
259 |     sendResponse
260 |   ) => {
261 |     const { kind = null } = request;
262 |     const kinds = MESSAGE_TYPES;
263 | 
264 |     if (!kind) {
265 |       return;
266 |     }
267 | 
268 |     if (!_.values(kinds).includes(kind)) {
269 |       console.error(
270 |         "[background] request kind must be one of",
271 |         _.values(kinds)
272 |       );
273 |       return;
274 |     }
275 | 
276 |     const tabId = getTabId(from);
277 |     const tab = await getTab(tabId);
278 | 
279 |     if (kind === kinds.log) {
280 |     } else if (kind === kinds.send_feedback) {
281 |       sendFeedback({
282 |         message: request.value.message,
283 |         from: request.value.from
284 |       });
285 |     } else if (kind === kinds.get_current_styles_diff) {
286 |       if (
287 |         !DEVTOOLS_OPEN_TABS[tabId] &&
288 |         request.value &&
289 |         request.value.devtools_required
290 |       ) {
291 |         inlineHeaderConnection.sendMessage(
292 |           `content_script:${PORT_TYPES.inline_header}:${tabId}`,
293 |           {
294 |             kind: MESSAGE_TYPES.open_devtools_plz
295 |           }
296 |         );
297 |       }
298 | 
299 |       getCurrentStylesheetsDiff(tabId).then(response => sendResponse(response));
300 |     } else if (kind === kinds.send_success_notification) {
301 |       chrome.notifications.create({
302 |         type: "basic",
303 |         iconUrl: chrome.extension.getURL(DEFAULT_ICON_PATH["128"]),
304 |         title: !request.value.didCopy
305 |           ? `Created styleurl`
306 |           : "Copied your styleurl to clipboard",
307 |         message:
308 |           "Your CSS changes have been exported to a styleurl successfully. Now you can share it!"
309 |       });
310 |     } else if (kind === kinds.get_styleurl) {
311 |       const styleURL = _.first(styleURLsForTabId(tabId));
312 |       sendResponse({ value: styleURL, kind });
313 |     } else if (kind === kinds.update_styleurl_state) {
314 |       const styleURL = _.first(styleURLsForTabId(tabId));
315 |       const { isBarEnabled, isStyleEnabled } = request.value;
316 | 
317 |       if (isBarEnabled !== styleURL.isBarEnabled) {
318 |         styleURL.isBarEnabled = isBarEnabled;
319 |       }
320 | 
321 |       if (isStyleEnabled !== styleURL.isStyleEnabled) {
322 |         styleURL.isStyleEnabled = isStyleEnabled;
323 |       }
324 | 
325 |       inlineHeaderConnection.sendMessage(
326 |         `content_script:${PORT_TYPES.inline_header}:${tabId}`,
327 |         { value: styleURL, kind: kinds.update_styleurl_state }
328 |       );
329 | 
330 |       if (!from.includes(PORT_TYPES.stylesheet_manager)) {
331 |         sendStyleURLsToTab({ tabId });
332 |       }
333 |     } else if (kind === kinds.shared_styleurl) {
334 |       chrome.notifications.create({
335 |         type: "basic",
336 |         iconUrl: chrome.extension.getURL(DEFAULT_ICON_PATH["128"]),
337 |         title: "Copied styleurl to clipboard",
338 |         message: "Share the styleurl by pasting it to a friend or colleague"
339 |       });
340 |     } else if (kind === kinds.upload_stylesheets) {
341 |       toggleStylebar(tabId, false).then(() => {
342 |         chrome.tabs.captureVisibleTab(null, { format: "png" }, async function(
343 |           photo
344 |         ) {
345 |           uploadStylesheets({
346 |             stylesheets: request.value.stylesheets,
347 |             url: tab.url,
348 |             visibility: request.value.visibility
349 |           }).then(stylesheetResponse => {
350 |             sendResponse(stylesheetResponse);
351 |             if (stylesheetResponse.success) {
352 |               chrome.tabs.update(tabId, { selected: true });
353 | 
354 |               window.setTimeout(async () => {
355 |                 // Capturing the photo fails sometimes shrug
356 |                 if (photo) {
357 |                   uploadScreenshot({
358 |                     photo: await toFile(photo, SCREENSHOT_CONTENT_TYPE),
359 |                     key: stylesheetResponse.data.id,
360 |                     domain: stylesheetResponse.data.domain
361 |                   });
362 |                 }
363 | 
364 |                 toggleStylebar(tabId, true);
365 |               }, 50);
366 |             } else {
367 |               alert("Something didnt work quite right. Please try again!");
368 |             }
369 |           });
370 |         });
371 |       });
372 |     }
373 |   };
374 | 
375 |   const handleDevtoolMessages = async (request, from, sender, sendResponse) => {
376 |     const { kind = null } = request;
377 |     const kinds = MESSAGE_TYPES;
378 | 
379 |     if (!kind) {
380 |       return;
381 |     }
382 | 
383 |     if (!_.values(kinds).includes(kind)) {
384 |       console.error(
385 |         "[background] request kind must be one of",
386 |         _.values(kinds)
387 |       );
388 |       return;
389 |     }
390 | 
391 |     const tabId = getTabId(from);
392 |     const tab = await getTab(tabId);
393 | 
394 |     if (kind === kinds.log) {
395 |       console.log.apply(console, request.value);
396 |     } else if (kind === kinds.send_content_stylesheets) {
397 |       log("Received content stylesheets", request.value);
398 |       if (!TAB_ORIGINAL_STYLES[tabId]) {
399 |         TAB_ORIGINAL_STYLES[tabId] = request.value;
400 |         LAST_RECEIVED_TAB_ORIGINAL_STYLES[tabId] = new Date().getTime();
401 |       } else {
402 |         const contentStyles = request.value;
403 |         const existingSheets = TAB_ORIGINAL_STYLES[tabId];
404 |         contentStyles.forEach(style => {
405 |           const index = _.findIndex(
406 |             existingSheets,
407 |             sheet => sheet.url === style.url
408 |           );
409 |           if (index === -1) {
410 |             TAB_ORIGINAL_STYLES[tabId].push(style);
411 |             LAST_RECEIVED_TAB_ORIGINAL_STYLES[tabId] = new Date().getTime();
412 |           }
413 |         });
414 |       }
415 |     } else if (kind === kinds.open_style_editor) {
416 |       injectCreateStyleURLBar(tabId);
417 |     } else if (
418 |       kind === kinds.style_diff_changed &&
419 |       shouldAssumeChangesAreReal(tabId) &&
420 |       !styleURLsForTabId(tabId)
421 |     ) {
422 |       injectCreateStyleURLBar(tabId);
423 |     }
424 |   };
425 | 
426 |   const getInlineStylesDiff = tabId => {
427 |     return inlineStyleObserverConnection
428 |       .sendMessage(
429 |         `content_script:${PORT_TYPES.inline_style_observer}:${tabId}`,
430 |         {
431 |           kind: MESSAGE_TYPES.get_inline_style_diff
432 |         }
433 |       )
434 |       .then(response => {
435 |         log("Received inline styles!");
436 | 
437 |         const { old_stylesheet, new_stylesheet } = response.value;
438 | 
439 |         if (!new_stylesheet || !new_stylesheet.content) {
440 |           return null;
441 |         }
442 | 
443 |         const content = old_stylesheet
444 |           ? diffSheet(old_stylesheet.content, new_stylesheet.content)
445 |           : new_stylesheet.content;
446 | 
447 |         return {
448 |           url: new_stylesheet.url,
449 |           content
450 |         };
451 |       });
452 |   };
453 | 
454 |   const getCurrentStylesheetsDiff = tabId => {
455 |     console.time("Diff All Sheets");
456 |     return devtoolConnection
457 |       .sendMessage(`devtool:${PORT_TYPES.devtool_widget}:${tabId}`, {
458 |         kind: MESSAGE_TYPES.get_current_styles_diff
459 |       })
460 |       .then(
461 |         async response => {
462 |           log("Received styles!");
463 |           let modifiedSheets = response.value.stylesheets.slice();
464 |           const currentStyles = response.value.general_stylesheets;
465 |           const oldStyles = TAB_ORIGINAL_STYLES[tabId];
466 |           if (oldStyles) {
467 |             oldStyles
468 |               .filter(
469 |                 style =>
470 |                   style.url &&
471 |                   style.url.indexOf("inject_create_styleurl.css") === -1 // this comes up ugh
472 |               )
473 |               .forEach(oldStyle => {
474 |                 const newStyle = currentStyles.find(
475 |                   style => style.url === oldStyle.url
476 |                 );
477 | 
478 |                 console.time("Diff Sheet [No Memoize]");
479 |                 const diffedStyle = diffSheet(
480 |                   oldStyle ? oldStyle.content || "" : "",
481 |                   newStyle ? newStyle.content || "" : ""
482 |                 );
483 |                 console.timeEnd("Diff Sheet [No Memoize]");
484 | 
485 |                 if (diffedStyle && diffedStyle.trim().length > 0) {
486 |                   modifiedSheets.push({
487 |                     url: oldStyle.url,
488 |                     content: diffedStyle
489 |                   });
490 |                 }
491 |               });
492 |           }
493 | 
494 |           TAB_IDS_STYLESHEET_DIFFS[tabId] = modifiedSheets;
495 | 
496 |           try {
497 |             const fauxInlineStylesheet = await getInlineStylesDiff(tabId);
498 | 
499 |             if (fauxInlineStylesheet) {
500 |               modifiedSheets.push(fauxInlineStylesheet);
501 |             }
502 |           } catch (exception) {
503 |             console.error(exception);
504 |           }
505 | 
506 |           console.timeEnd("Diff All Sheets");
507 | 
508 |           return {
509 |             stylesheets: modifiedSheets
510 |           };
511 |         },
512 |         err => {
513 |           console.error(err);
514 |           alert("Something went wrong. Please try again");
515 |         }
516 |       );
517 |   };
518 | 
519 |   chrome.browserAction.onClicked.addListener(tab => {
520 |     console.log("Clicked Browser Action", getBrowserActionState());
521 |     if (getBrowserActionState() === BROWSER_ACTION_STATES.default) {
522 |       injectCreateStyleURLBar(tab.id);
523 |     } else if (getBrowserActionState() === BROWSER_ACTION_STATES.upload_style) {
524 |       injectCreateStyleURLBar(tab.id);
525 |     } else if (
526 |       getBrowserActionState() === BROWSER_ACTION_STATES.style_applied
527 |     ) {
528 |       injectViewStyleURLBar(tab.id);
529 |     }
530 |   });
531 | 
532 |   chrome.webNavigation.onBeforeNavigate.addListener(
533 |     ({ tabId, url }) => {
534 |       autodetectStyleURL({ tabId, url });
535 |     },
536 |     {
537 |       url: Object.values(SPECIAL_QUERY_PARAMS).map(queryContains => ({
538 |         queryContains
539 |       }))
540 |     }
541 |   );
542 | 
543 |   const autoInsertCSS = async tab => {
544 |     await autodetectStyleURL(tab);
545 |     const styleURLs = styleURLsForTabId(tab.tabId);
546 | 
547 |     // Handle case where we haven't loaded the styleurl gist yet
548 |     const pendingStyleURLs = styleURLs.filter(({ loaded = false }) => !loaded);
549 |     if (pendingStyleURLs) {
550 |       await Promise.all(
551 |         pendingStyleURLs.map(styleurl => styleurl.load(styleurl.gistId))
552 |       );
553 |     }
554 | 
555 |     const appliedStyles = styleURLs.filter(styleURLTab =>
556 |       styleURLTab.applyToTab(tab, stylesheetManagerConnection)
557 |     );
558 | 
559 |     const styleCount = appliedStyles.length;
560 |     if (styleCount > 0) {
561 |       setBrowserActionToStyleApplied({ tabId: tab.tabId, styleCount });
562 |     } else {
563 |       // TODO: see if this is too aggro
564 |       setBrowserActionToDefault({ tabId: tab.tabId });
565 |     }
566 |   };
567 | 
568 |   chrome.webNavigation.onCommitted.addListener(tab =>
569 |     stopMonitoringTabID(tab.tabId)
570 |   );
571 |   chrome.webNavigation.onCommitted.addListener(autoInsertCSS);
572 |   chrome.webNavigation.onHistoryStateUpdated.addListener(({ tabId, url }) =>
573 |     autodetectStyleURL({ url, tabId })
574 |   );
575 | 
576 |   chrome.webNavigation.onReferenceFragmentUpdated.addListener(({ tabId }) =>
577 |     sendStyleURLsToTab({ tabId })
578 |   );
579 | 
580 |   const injectBarHistoryListener = async ({ tabId, url }) => {
581 |     if (!url) {
582 |       return;
583 |     }
584 | 
585 |     const styleURLs = styleURLsForTabId(tabId);
586 | 
587 |     // Handle case where we haven't loaded the styleurl gist yet
588 |     const pendingStyleURLs = styleURLs.filter(({ loaded = false }) => !loaded);
589 |     if (pendingStyleURLs) {
590 |       await Promise.all(
591 |         pendingStyleURLs.map(styleurl => styleurl.load(styleurl.gistId))
592 |       );
593 |     }
594 | 
595 |     if (
596 |       styleURLs
597 |         .filter(({ isBarEnabled }) => isBarEnabled)
598 |         .find(styleURL => styleURL.canApplyStyle(url))
599 |     ) {
600 |       injectViewStyleURLBar(tabId);
601 |     }
602 |   };
603 | 
604 |   chrome.webNavigation.onDOMContentLoaded.addListener(injectBarHistoryListener);
605 | 
606 |   chrome.webNavigation.onHistoryStateUpdated.addListener(
607 |     injectBarHistoryListener
608 |   );
609 |   chrome.webNavigation.onTabReplaced.addListener(injectBarHistoryListener);
610 | 
611 |   chrome.tabs.onRemoved.addListener(tabId => {
612 |     if (TAB_IDS_TO_APPLY_STYLES[tabId]) {
613 |       stopMonitoringTabID(tabId);
614 |     }
615 | 
616 |     if (DEVTOOLS_OPEN_TABS[tabId]) {
617 |       DEVTOOLS_OPEN_TABS[tabId] = false;
618 |     }
619 |   });
620 | 
621 |   devtoolConnection = messenger.initConnection(
622 |     PORT_TYPES.devtool_widget,
623 |     handleDevtoolMessages
624 |   );
625 | 
626 |   gistConnection = messenger.initConnection(
627 |     PORT_TYPES.github_gist,
628 |     handleGistContentScriptMessages
629 |   );
630 | 
631 |   inlineHeaderConnection = messenger.initConnection(
632 |     PORT_TYPES.inline_header,
633 |     handleInlineHeaderMessages
634 |   );
635 | 
636 |   stylesheetManagerConnection = messenger.initConnection(
637 |     PORT_TYPES.stylesheet_manager,
638 |     handleInlineHeaderMessages
639 |   );
640 | 
641 |   inlineStyleObserverConnection = messenger.initConnection(
642 |     PORT_TYPES.inline_style_observer,
643 |     handleInlineStyleObserverMessages
644 |   );
645 | 
646 |   // If you just installed and have a styleURL page open, reload the tab so that the content script is loaded
647 |   chrome.runtime.onInstalled.addListener(() => {
648 |     chrome.tabs.query({ url: `${__FRONTEND_HOST__}/*` }, tabs => {
649 |       tabs.forEach(tab => chrome.tabs.reload(tab.id));
650 | 
651 |       // See if there's any active non-homepage StyleURL tabs and set it to active
652 |       // Basically we want to ignore / and all of the root routes
653 |       // We _do_ want "/news.ycombinator.com/long_gist_id"
654 |       const styleURLTab = tabs.find(
655 |         tab =>
656 |           `${__FRONTEND_HOST__}/`.split("/").length < tab.url.split("/").length
657 |       );
658 |       // Also set it to active
659 |       if (styleURLTab) {
660 |         chrome.tabs.update(styleURLTab.id, { active: true });
661 |       }
662 |     });
663 |   });
664 | });
665 | 


--------------------------------------------------------------------------------
/chrome/extension/background/badge.js:
--------------------------------------------------------------------------------
 1 | chrome.storage.local.get('todos', (obj) => {
 2 |   let todos = obj.todos;
 3 |   if (todos) {
 4 |     todos = JSON.parse(todos);
 5 |     const len = todos.filter(todo => !todo.marked).length;
 6 |     if (len > 0) {
 7 |       chrome.browserAction.setBadgeText({ text: len.toString() });
 8 |     }
 9 |   } else {
10 |     // Initial
11 |     chrome.browserAction.setBadgeText({ text: '1' });
12 |   }
13 | });
14 | 


--------------------------------------------------------------------------------
/chrome/extension/background/contextMenus.js:
--------------------------------------------------------------------------------
 1 | let windowId = 0;
 2 | const CONTEXT_MENU_ID = 'example_context_menu';
 3 | 
 4 | function closeIfExist() {
 5 |   if (windowId > 0) {
 6 |     chrome.windows.remove(windowId);
 7 |     windowId = chrome.windows.WINDOW_ID_NONE;
 8 |   }
 9 | }
10 | 
11 | function popWindow(type) {
12 |   closeIfExist();
13 |   const options = {
14 |     type: 'popup',
15 |     left: 100,
16 |     top: 100,
17 |     width: 800,
18 |     height: 475,
19 |   };
20 |   if (type === 'open') {
21 |     options.url = 'window.html';
22 |     chrome.windows.create(options, (win) => {
23 |       windowId = win.id;
24 |     });
25 |   }
26 | }
27 | 
28 | chrome.contextMenus.create({
29 |   id: CONTEXT_MENU_ID,
30 |   title: 'React Chrome Extension Example',
31 |   contexts: ['all'],
32 |   documentUrlPatterns: [
33 |     'https://github.com/*'
34 |   ]
35 | });
36 | 
37 | chrome.contextMenus.onClicked.addListener((event) => {
38 |   if (event.menuItemId === CONTEXT_MENU_ID) {
39 |     popWindow('open');
40 |   }
41 | });
42 | 


--------------------------------------------------------------------------------
/chrome/extension/background/inject.js:
--------------------------------------------------------------------------------
 1 | import injectScriptNames from "../lib/injectScriptNames";
 2 | 
 3 | const log = (...messages) =>
 4 |   console.log.apply(console, ["[inject]", ...messages]);
 5 | 
 6 | function isInjected(tabId, name) {
 7 |   return new Promise((resolve, reject) => {
 8 |     const scriptName = injectScriptNames[name];
 9 |     chrome.tabs.executeScript(
10 |       tabId,
11 |       {
12 |         code: `!!document.querySelector("#${scriptName}")`,
13 |         runAt: "document_start"
14 |       },
15 |       results => resolve(results[0])
16 |     );
17 |   });
18 | }
19 | 
20 | export async function loadScript(name, tabId, cb, runAt = "document_end") {
21 |   if (runAt !== "document_start") {
22 |     const didInject = await isInjected(tabId, name);
23 |     if (didInject) {
24 |       log("SKIP injecting script", name, "into", tabId);
25 |       cb && cb(false);
26 |       return;
27 |     }
28 |   }
29 | 
30 |   log("Injecting script", name, "into", tabId);
31 | 
32 |   chrome.tabs.executeScript(
33 |     tabId,
34 |     { file: `/${name}.bundle.js`, runAt, allFrames: false },
35 |     () => cb && cb(true)
36 |   );
37 | }
38 | 
39 | export const injectCreateStyleURLBar = (tabId, cb) => {
40 |   loadScript("inject_create_styleurl", tabId, cb);
41 | };
42 | 
43 | export const injectViewStyleURLBar = (tabId, cb) => {
44 |   loadScript("inject_view_styleurl", tabId, cb);
45 | };
46 | 
47 | export const injectCSSManager = (tabId, cb) => {
48 |   loadScript("css_manager_content_script", tabId, cb, "document_start");
49 | };
50 | 
51 | export const injectInlineStyleObserver = (tabId, cb) => {
52 |   loadScript("inline_style_observer", tabId, cb, "document_start");
53 | };
54 | 


--------------------------------------------------------------------------------
/chrome/extension/background/view_styleurl/ViewStyleURL.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/background/view_styleurl/ViewStyleURL.js


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl.css:
--------------------------------------------------------------------------------
 1 | /* @import "reset-css"; */
 2 | @import "./create_styleurl/fonts.css";
 3 | 
 4 | .StyleURLShadowDOMRoot,
 5 | textarea,
 6 | div,
 7 | input {
 8 |     font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 9 | }
10 | 
11 | .StyleURLShadowDOMRoot {
12 |     margin: 0;
13 |     padding: 0;
14 |     font-size: 10pt;
15 |     height: 100%;
16 |     width: 100%;
17 | }
18 | 
19 | h1,
20 | h2,
21 | h3 {
22 |     margin: 0;
23 |     padding: 0;
24 |     font-weight: 600;
25 | }
26 | 
27 | .ShareTextInput {
28 |     padding: 14px;
29 |     color: white;
30 |     font-size: 12px;
31 |     border-top-left-radius: 2px;
32 |     border-top-right-radius: 2px;
33 |     overflow: hidden;
34 | }
35 | 
36 | .ViewChanges-actions {
37 |     display: flex;
38 |     border-top: 1px solid #13161b;
39 | }
40 | 
41 | .ViewChanges-separator {
42 |     height: 31px;
43 |     width: 1px;
44 |     display: block;
45 |     flex-shrink: 0;
46 |     flex-grow: 0;
47 |     content: "";
48 | }
49 | 
50 | .ViewChanges-action {
51 |     display: flex;
52 |     align-items: center;
53 |     flex: 0.5;
54 |     color: white;
55 |     justify-content: center;
56 |     padding: 6px 8px;
57 |     font-weight: 600;
58 |     text-decoration: none;
59 |     cursor: pointer;
60 |     font-size: 14px;
61 | }
62 | 
63 | .ViewChanges-action-icon {
64 |     margin-top: auto;
65 |     margin-bottom: auto;
66 |     margin-right: 8px;
67 | }
68 | 
69 | .ViewChanges-action:hover,
70 | .ViewChanges-separator {
71 |     background-color: #13161b;
72 | }
73 | 
74 | .ShareLink {
75 |     font-size: 14px;
76 |     color: #fff;
77 |     background-color: rgb(65, 70, 81);
78 |     appearance: none;
79 |     -webkit-appearance: none;
80 |     -moz-appearance: none;
81 |     border: 0;
82 |     outline: 0;
83 |     padding: 6px 8px;
84 |     width: 300px;
85 |     display: none;
86 |     text-align: center;
87 | }
88 | 
89 | .ShareLink--shown {
90 |     display: inline-block;
91 | }
92 | 
93 | @media print {
94 |     .StyleURLShadowDOMRoot {
95 |         display: none;
96 |     }
97 | }
98 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import CreateStyleURL from "./create_styleurl/CreateStyleURL";
4 | import "./create_styleurl.css";
5 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/CreateStyleURL.js:
--------------------------------------------------------------------------------
  1 | import { HeaderBar } from "app/components/HeaderBar";
  2 | import Messenger from "chrome-ext-messenger";
  3 | import classNames from "classnames";
  4 | import filenameify from "filenamify";
  5 | import _ from "lodash";
  6 | import React from "react";
  7 | import CodeDiff, { concatStylesheets } from "../../app/components/CodeDiff";
  8 | import Dropdown from "../../app/components/Dropdown";
  9 | import { Icon } from "../../app/components/Icon";
 10 | import injectScriptNames from "../lib/injectScriptNames";
 11 | import { MESSAGE_TYPES, PORT_TYPES } from "../lib/port";
 12 | import { INITIAL_WIDTH } from "./messages";
 13 | 
 14 | const messenger = new Messenger();
 15 | 
 16 | export const getFilename = () => {
 17 |   // The plus here is just here so the VSCode syntax highlighter doesnt get messed up
 18 |   // Weird VSCode bug :shrug:
 19 |   return filenameify(`${location.pathname.substr(1)}.diff` + ".css", {
 20 |     replacement: "_"
 21 |   });
 22 | };
 23 | 
 24 | const buildEditURL = gistId => {
 25 |   return `${__API_HOST__}/api/gists/edit/${gistId}`;
 26 | };
 27 | 
 28 | function copyToClipboard(text) {
 29 |   const input = document.createElement("textarea");
 30 |   input.style.position = "fixed";
 31 |   input.style.opacity = 0;
 32 |   input.value = text;
 33 |   document.body.appendChild(input);
 34 |   input.select();
 35 |   document.execCommand("Copy");
 36 |   document.body.removeChild(input);
 37 | }
 38 | 
 39 | class CreateStyleURL extends React.PureComponent {
 40 |   state = {
 41 |     stylesheets: [],
 42 |     downloadURL: null
 43 |   };
 44 | 
 45 |   static getDerivedStateFromProps(props, state) {
 46 |     if (props.stylesheets !== state.stylesheets) {
 47 |       if (props.stylesheets) {
 48 |         const blob = new Blob([concatStylesheets(props.stylesheets, true)], {
 49 |           type: "text/plain;charset=UTF-8"
 50 |         });
 51 | 
 52 |         return {
 53 |           stylesheets: props.stylesheets,
 54 |           downloadURL: window.URL.createObjectURL(blob)
 55 |         };
 56 |       } else {
 57 |         if (state.downloadURL) {
 58 |           URL.revokeObjectURL(state.downloadURL);
 59 |         }
 60 | 
 61 |         return { stylesheets: [], downloadURL: null };
 62 |       }
 63 |     } else {
 64 |       return {};
 65 |     }
 66 |   }
 67 | 
 68 |   render() {
 69 |     const {
 70 |       onToggleDiff,
 71 |       onExport,
 72 |       onShareChanges,
 73 |       stylesheets,
 74 |       shareURL,
 75 |       setShareLinkRef,
 76 |       onSendFeedback,
 77 |       hidden,
 78 |       onHide
 79 |     } = this.props;
 80 | 
 81 |     return (
 82 |       <HeaderBar
 83 |         hidden={hidden}
 84 |         onHide={onHide}
 85 |         onSendFeedback={onSendFeedback}
 86 |         center={
 87 |           <input
 88 |             value={shareURL}
 89 |             readOnly
 90 |             ref={setShareLinkRef}
 91 |             className={classNames("ShareLink", {
 92 |               "ShareLink--shown": shareURL
 93 |             })}
 94 |           />
 95 |         }
 96 |       >
 97 |         <Dropdown
 98 |           onToggle={onToggleDiff}
 99 |           icon={<Icon width={"32"} height="15" name="code" />}
100 |           title="View changes"
101 |         >
102 |           <div className="ViewChanges">
103 |             <CodeDiff stylesheets={stylesheets} />
104 |             <div className="ViewChanges-actions">
105 |               <a
106 |                 href={this.state.downloadURL}
107 |                 download={getFilename()}
108 |                 className="ViewChanges-action"
109 |               >
110 |                 <div className="ViewChanges-action-text">Download</div>
111 |               </a>
112 |               <div className="ViewChanges-separator" />
113 |               <div onClick={onExport} className="ViewChanges-action">
114 |                 <div className="ViewChanges-action-text">Create Gist</div>
115 |               </div>
116 |             </div>
117 |           </div>
118 |         </Dropdown>
119 |         <Dropdown
120 |           onClick={onShareChanges}
121 |           icon={<Icon width={"24"} height="15" name="share" />}
122 |           title="Share changes"
123 |         />
124 |       </HeaderBar>
125 |     );
126 |   }
127 | }
128 | 
129 | class CreateStyleURLContainer extends React.Component {
130 |   constructor(props) {
131 |     super(props);
132 | 
133 |     this.state = {
134 |       width: INITIAL_WIDTH,
135 |       shareURL: "",
136 |       hidden: false,
137 |       stylesheets: []
138 |     };
139 | 
140 |     this._connection = messenger.initConnection(
141 |       PORT_TYPES.inline_header,
142 |       this.handleMessage
143 |     );
144 |   }
145 | 
146 |   handleMessage = async (request, from, sender, sendResponse) => {
147 |     const kinds = MESSAGE_TYPES;
148 |     const { kind = null } = request;
149 |     if (kind === kinds.style_diff_changed) {
150 |       this.syncStylesheets();
151 |     } else if (kind === kinds.open_devtools_plz) {
152 |       alert(
153 |         "Please open Chrome Devtools and try again -- ⋮ -> More Tools -> Developer Tools"
154 |       );
155 |     }
156 |   };
157 | 
158 |   componentWillUnmount() {
159 |     if (this._connection) {
160 |       this._connection.disconnect();
161 |     }
162 |   }
163 | 
164 |   syncStylesheets = () => {
165 |     this._sendMessage({
166 |       kind: MESSAGE_TYPES.get_current_styles_diff
167 |     }).then(({ stylesheets }) => {
168 |       this.setState({
169 |         stylesheets: stylesheets.map(({ content, url }) => [
170 |           _.last(url.split("/")),
171 |           content
172 |         ])
173 |       });
174 |       this.setVisible(!_.isEmpty(stylesheets));
175 |     });
176 |   };
177 | 
178 |   setShareLinkRef = shareLinkRef => (this.shareLinkRef = shareLinkRef);
179 | 
180 |   handleToggleDiff = isOpen => {
181 |     if (isOpen) {
182 |       this.syncStylesheets();
183 |     }
184 |   };
185 | 
186 |   _sendMessage = message => {
187 |     return this._connection.sendMessage(
188 |       `background:${PORT_TYPES.inline_header}`,
189 |       message
190 |     );
191 |   };
192 | 
193 |   handleExport = async () => {
194 |     const { stylesheets } = await this._sendMessage({
195 |       kind: MESSAGE_TYPES.get_current_styles_diff,
196 |       value: {
197 |         devtools_required: true
198 |       }
199 |     });
200 | 
201 |     if (!stylesheets || !stylesheets.length) {
202 |       alert("Please make some CSS changes and try again");
203 |       return;
204 |     }
205 | 
206 |     this._sendMessage({
207 |       kind: MESSAGE_TYPES.upload_stylesheets,
208 |       value: {
209 |         stylesheets,
210 |         visibility: "private"
211 |       }
212 |     }).then(response => {
213 |       if (response && response.data && response.data.url) {
214 |         window.open(response.data.url, "_blank");
215 |       }
216 |     });
217 |   };
218 | 
219 |   handleSendFeedback = message => {
220 |     return this._sendMessage({
221 |       kind: MESSAGE_TYPES.send_feedback,
222 |       value: {
223 |         message,
224 |         from: "create"
225 |       }
226 |     });
227 |   };
228 | 
229 |   handleShareChanges = () => {
230 |     return this._sendMessage({
231 |       kind: MESSAGE_TYPES.get_current_styles_diff,
232 |       value: {
233 |         devtools_required: true
234 |       }
235 |     }).then(({ stylesheets }) => {
236 |       if (!stylesheets || !stylesheets.length) {
237 |         alert("Please make some CSS changes and try again");
238 |         return;
239 |       }
240 | 
241 |       this._sendMessage({
242 |         kind: MESSAGE_TYPES.upload_stylesheets,
243 |         value: {
244 |           stylesheets,
245 |           visibility: "public"
246 |         }
247 |       })
248 |         .then(response => {
249 |           if (response && response.success) {
250 |             const shareURL = response.data.share_url;
251 | 
252 |             this.setState({ shareURL });
253 |             window.open(response.data.url, "_blank");
254 |             return shareURL;
255 |           }
256 | 
257 |           return null;
258 |         })
259 |         .then(shareURL => {
260 |           if (!shareURL) {
261 |             return;
262 |           }
263 | 
264 |           copyToClipboard(shareURL);
265 | 
266 |           this._sendMessage({
267 |             kind: MESSAGE_TYPES.send_success_notification,
268 |             value: {
269 |               didCopy: true
270 |             }
271 |           });
272 |         });
273 |     });
274 |   };
275 | 
276 |   setVisible = isVisible => {
277 |     const hidden = !isVisible;
278 |     if (hidden === this.state.hidden) {
279 |       return;
280 |     }
281 | 
282 |     this.setState({ hidden });
283 | 
284 |     const shadowRoot = document.querySelector(
285 |       `#${injectScriptNames.inject_create_styleurl}`
286 |     );
287 | 
288 |     if (hidden) {
289 |       shadowRoot.style.opacity = 0;
290 |       shadowRoot.style.pointerEvents = "none";
291 |     } else {
292 |       shadowRoot.style.opacity = 1;
293 |       shadowRoot.style.pointerEvents = "auto";
294 |     }
295 |   };
296 | 
297 |   handleHideBar = () => this.setVisible(false);
298 | 
299 |   render() {
300 |     return (
301 |       <CreateStyleURL
302 |         hidden={this.state.hidden}
303 |         onExport={this.handleExport}
304 |         onShareChanges={this.handleShareChanges}
305 |         onHide={this.handleHideBar}
306 |         stylesheets={this.state.stylesheets}
307 |         onToggleDiff={this.handleToggleDiff}
308 |         onSendFeedback={this.handleSendFeedback}
309 |         setShareLinkRef={this.setShareLinkRef}
310 |         shareURL={this.state.shareURL}
311 |       />
312 |     );
313 |   }
314 | }
315 | 
316 | export default CreateStyleURLContainer;
317 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/Gist.css:
--------------------------------------------------------------------------------
 1 | #gist_root,
 2 | #gist_root body {
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #gist_root {
 8 |     width: auto;
 9 | }
10 | 
11 | #gist_root .gist {
12 |     display: block !important;
13 |     position: relative !important;
14 | }
15 | 
16 | #gist_root .gist-file {
17 |     border: none !important;
18 |     display: flex;
19 |     flex-direction: column-reverse;
20 |     margin-bottom: 0;
21 | }
22 | 
23 | .gist-data,
24 | .file-box,
25 | .file,
26 | .blob-wrapper,
27 | .js-file-line-container {
28 |     width: auto;
29 | }
30 | 
31 | #gist_root .gist-data {
32 |     background-color: #272822 !important;
33 |     padding: 15px 5px !important;
34 |     border: 0 !important;
35 |     border-bottom: none !important;
36 |     border-radius: 0px;
37 | }
38 | 
39 | #gist_root .gist .highlight {
40 |     background-color: #272822 !important;
41 | }
42 | 
43 | #gist_root .gist .gist-meta {
44 |     border-radius: 0;
45 |     background-color: rgb(65, 65, 67);
46 | }
47 | 
48 | #gist_root .gist .gist-meta,
49 | #gist_root .gist .gist-meta a {
50 |     color: white;
51 | }
52 | 
53 | #gist_root .blob-num {
54 |     border: solid #464741 !important;
55 |     border-width: 0 1px 0 0 !important;
56 | }
57 | 
58 | /* MONOKAI THEME SYNTAX HIGHLIGHTING - NOT COMPLETE */
59 | #gist_root .blob-code-inner, #gist_root .pl-c1 {
60 |     color: rgb(78, 198, 234) !important;
61 | }
62 | 
63 | #gist_root .js-line-number {
64 |     color: #8f908a !important;
65 | }
66 | 
67 | #gist_root .pl-ent {
68 |     color: #fc1f70 !important;
69 | }
70 | 
71 | #gist_root .pl-e {
72 |     color: #a4e402 !important;
73 | }
74 | 
75 | #gist_root .pl-c {
76 |     color: #75715d !important;
77 | }
78 | 
79 | #gist_root .pl-s, .pl-pds {
80 |     color: #e6dc6d !important;
81 | }
82 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/Gist.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./gist.css";
 3 | 
 4 | const gistURL = ({ file, id }) => {
 5 |   const fileArg = file ? `?file=${file}` : "";
 6 | 
 7 |   return `https://gist.github.com/${id}.js${fileArg}`;
 8 | };
 9 | 
10 | export class Gist extends React.Component {
11 |   state = {
12 |     url: null
13 |   };
14 | 
15 |   static getDerivedStateFromProps(props, state) {
16 |     const { id, file } = props;
17 | 
18 |     const url = gistURL({ id, file });
19 | 
20 |     if (url !== state.url) {
21 |       return { url };
22 |     } else {
23 |       return {};
24 |     }
25 |   }
26 | 
27 |   componentDidUpdate(_prevProps, prevState) {
28 |     if (this.state.url !== prevState.url) {
29 |       this._updateIframeContent();
30 |     }
31 |   }
32 | 
33 |   componentDidMount() {
34 |     this._updateIframeContent();
35 |   }
36 | 
37 |   _updateIframeContent = () => {
38 |     const { id, file, height } = this.props;
39 | 
40 |     const iframe = this.iframeNode;
41 | 
42 |     let doc = iframe.document;
43 |     if (iframe.contentDocument) doc = iframe.contentDocument;
44 |     else if (iframe.contentWindow) doc = iframe.contentWindow.document;
45 | 
46 |     const gistLink = this.state.url;
47 |     const gistScript = `<script type="text/javascript" src="${gistLink}"></script>`;
48 |     const stylesheetHref = document.querySelector("#root_stylesheet").href;
49 |     const styles = `<link rel="stylesheet" href="${stylesheetHref}" />`;
50 |     const elementId = file ? `gist-${id}-${file}` : `gist-${id}`;
51 | 
52 |     const resizeScript = `onload="parent.document.getElementById('${elementId}').style.height=document.body.scrollHeight + 'px'"`;
53 |     const iframeHtml = `<html id="gist_root"><head><base target="_blank">${styles}</head><body ${resizeScript}>${gistScript}</body></html>`;
54 | 
55 |     doc.open();
56 |     doc.writeln(iframeHtml);
57 |     doc.close();
58 |   };
59 | 
60 |   render() {
61 |     const { id, file, height, width } = this.props;
62 | 
63 |     return (
64 |       <iframe
65 |         ref={n => {
66 |           this.iframeNode = n;
67 |         }}
68 |         width="600"
69 |         height={400}
70 |         frameBorder={0}
71 |         id={file ? `gist-${id}-${file}` : `gist-${id}`}
72 |       />
73 |     );
74 |   }
75 | }
76 | 
77 | export default Gist;
78 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts.css:
--------------------------------------------------------------------------------
  1 | /* cyrillic-ext */
  2 | @font-face {
  3 |     font-family: 'Open Sans';
  4 |     font-style: normal;
  5 |     font-weight: 400;
  6 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
  7 |     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  8 | }
  9 | 
 10 | /* cyrillic */
 11 | @font-face {
 12 |     font-family: 'Open Sans';
 13 |     font-style: normal;
 14 |     font-weight: 400;
 15 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 16 |     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 17 | }
 18 | 
 19 | /* greek-ext */
 20 | @font-face {
 21 |     font-family: 'Open Sans';
 22 |     font-style: normal;
 23 |     font-weight: 400;
 24 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 25 |     unicode-range: U+1F00-1FFF;
 26 | }
 27 | 
 28 | /* greek */
 29 | @font-face {
 30 |     font-family: 'Open Sans';
 31 |     font-style: normal;
 32 |     font-weight: 400;
 33 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 34 |     unicode-range: U+0370-03FF;
 35 | }
 36 | 
 37 | /* vietnamese */
 38 | @font-face {
 39 |     font-family: 'Open Sans';
 40 |     font-style: normal;
 41 |     font-weight: 400;
 42 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 43 |     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 44 | }
 45 | 
 46 | /* latin-ext */
 47 | @font-face {
 48 |     font-family: 'Open Sans';
 49 |     font-style: normal;
 50 |     font-weight: 400;
 51 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 52 |     unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 53 | }
 54 | 
 55 | /* latin */
 56 | @font-face {
 57 |     font-family: 'Open Sans';
 58 |     font-style: normal;
 59 |     font-weight: 400;
 60 |     src: local("Open Sans Regular"), local("OpenSans-Regular"), url(./fonts/OpenSans-Regular.ttf) format("truetype");
 61 |     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 62 | }
 63 | 
 64 | /* cyrillic-ext */
 65 | @font-face {
 66 |     font-family: 'Open Sans';
 67 |     font-style: normal;
 68 |     font-weight: 600;
 69 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
 70 |     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 71 | }
 72 | 
 73 | /* cyrillic */
 74 | @font-face {
 75 |     font-family: 'Open Sans';
 76 |     font-style: normal;
 77 |     font-weight: 600;
 78 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
 79 |     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 80 | }
 81 | 
 82 | /* greek-ext */
 83 | @font-face {
 84 |     font-family: 'Open Sans';
 85 |     font-style: normal;
 86 |     font-weight: 600;
 87 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
 88 |     unicode-range: U+1F00-1FFF;
 89 | }
 90 | 
 91 | /* greek */
 92 | @font-face {
 93 |     font-family: 'Open Sans';
 94 |     font-style: normal;
 95 |     font-weight: 600;
 96 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
 97 |     unicode-range: U+0370-03FF;
 98 | }
 99 | 
100 | /* vietnamese */
101 | @font-face {
102 |     font-family: 'Open Sans';
103 |     font-style: normal;
104 |     font-weight: 600;
105 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
106 |     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
107 | }
108 | 
109 | /* latin-ext */
110 | @font-face {
111 |     font-family: 'Open Sans';
112 |     font-style: normal;
113 |     font-weight: 600;
114 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
115 |     unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
116 | }
117 | 
118 | /* latin */
119 | @font-face {
120 |     font-family: 'Open Sans';
121 |     font-style: normal;
122 |     font-weight: 600;
123 |     src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(./fonts/OpenSans-SemiBold.ttf) format("truetype");
124 |     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
125 | }
126 | 
127 | /* cyrillic-ext */
128 | @font-face {
129 |     font-family: 'Open Sans';
130 |     font-style: normal;
131 |     font-weight: 700;
132 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
133 |     unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
134 | }
135 | 
136 | /* cyrillic */
137 | @font-face {
138 |     font-family: 'Open Sans';
139 |     font-style: normal;
140 |     font-weight: 700;
141 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
142 |     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
143 | }
144 | 
145 | /* greek-ext */
146 | @font-face {
147 |     font-family: 'Open Sans';
148 |     font-style: normal;
149 |     font-weight: 700;
150 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
151 |     unicode-range: U+1F00-1FFF;
152 | }
153 | 
154 | /* greek */
155 | @font-face {
156 |     font-family: 'Open Sans';
157 |     font-style: normal;
158 |     font-weight: 700;
159 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
160 |     unicode-range: U+0370-03FF;
161 | }
162 | 
163 | /* vietnamese */
164 | @font-face {
165 |     font-family: 'Open Sans';
166 |     font-style: normal;
167 |     font-weight: 700;
168 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
169 |     unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
170 | }
171 | 
172 | /* latin-ext */
173 | @font-face {
174 |     font-family: 'Open Sans';
175 |     font-style: normal;
176 |     font-weight: 700;
177 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
178 |     unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
179 | }
180 | 
181 | /* latin */
182 | @font-face {
183 |     font-family: 'Open Sans';
184 |     font-style: normal;
185 |     font-weight: 700;
186 |     src: local("Open Sans Bold"), local("OpenSans-Bold"), url(./fonts/OpenSans-Bold.ttf) format("truetype");
187 |     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
188 | }
189 | 


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-Bold.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-BoldItalic.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-ExtraBold.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-ExtraBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-ExtraBoldItalic.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-Italic.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-Light.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-LightItalic.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-Regular.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-SemiBold.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/fonts/OpenSans-SemiBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jarred-Sumner/styleurl-extension/65618d88f606f54791c62c5e22ca7e50282cc828/chrome/extension/create_styleurl/fonts/OpenSans-SemiBoldItalic.ttf


--------------------------------------------------------------------------------
/chrome/extension/create_styleurl/messages.js:
--------------------------------------------------------------------------------
1 | export const INITIAL_HEIGHT = 76;
2 | 


--------------------------------------------------------------------------------
/chrome/extension/css_manager_content_script.js:
--------------------------------------------------------------------------------
  1 | // This code has largely been adapted from https://github.com/openstyles/stylus/blob/master/content/apply.js
  2 | // ...thanks
  3 | import Messenger from "chrome-ext-messenger";
  4 | import { PORT_TYPES, MESSAGE_TYPES } from "./lib/port";
  5 | import { makeAllRulesImportant } from "./lib/makeEverythingImportant";
  6 | import { shouldApplyStyleToURL } from "./lib/stylefile";
  7 | 
  8 | (() => {
  9 |   if (typeof window.applyOnMessage === "function") {
 10 |     // some weird bug in new Chrome: the content script gets injected multiple times
 11 |     return;
 12 |   }
 13 |   console.log("[CSSManager] INJECT START");
 14 |   const messenger = new Messenger();
 15 |   const connection = messenger.initConnection(
 16 |     PORT_TYPES.stylesheet_manager,
 17 |     applyOnMessage
 18 |   );
 19 |   const ID_PREFIX = "__styleurl-";
 20 | 
 21 |   const CHROME = chrome.app
 22 |     ? parseInt(navigator.userAgent.match(/Chrom\w+\/(?:\d+\.){2}(\d+)|$/)[1])
 23 |     : NaN;
 24 |   var ROOT = document.documentElement;
 25 |   var isOwnPage = location.protocol.endsWith("-extension:");
 26 |   var disableAll = false;
 27 |   var exposeIframes = false;
 28 |   var styleElements = new Map();
 29 |   var disabledElements = new Map();
 30 |   var retiredStyleTimers = new Map();
 31 |   var docRewriteObserver;
 32 |   var docRootObserver;
 33 | 
 34 |   requestStyles();
 35 | 
 36 |   window.applyOnMessage = applyOnMessage;
 37 | 
 38 |   if (!isOwnPage) {
 39 |     window.dispatchEvent(new CustomEvent(chrome.runtime.id));
 40 |     window.addEventListener(chrome.runtime.id, orphanCheck, true);
 41 |   }
 42 | 
 43 |   function requestStyles(options, callback = applyStyles) {
 44 |     var matchUrl = location.href;
 45 |     if (!matchUrl.match(/^(http|file|chrome|ftp)/)) {
 46 |       // dynamic about: and javascript: iframes don't have an URL yet
 47 |       // so we'll try the parent frame which is guaranteed to have a real URL
 48 |       try {
 49 |         if (window !== parent) {
 50 |           matchUrl = parent.location.href;
 51 |         }
 52 |       } catch (e) {}
 53 |     }
 54 | 
 55 |     console.log("[CSSManager] REQUEST STYLE");
 56 | 
 57 |     connection
 58 |       .sendMessage(`background:${PORT_TYPES.stylesheet_manager}`, {
 59 |         kind: MESSAGE_TYPES.get_styleurl
 60 |       })
 61 |       .then(message => {
 62 |         applyOnMessage(message.value);
 63 |       });
 64 |   }
 65 | 
 66 |   const convertFromStyleURL = value => {
 67 |     const { stylesheets = [], isStyleEnabled = true, stylefile = {} } = value;
 68 | 
 69 |     const styles = stylesheets.map(stylesheet => ({
 70 |       code: stylesheet[1],
 71 |       id: stylesheet[0],
 72 |       enabled: isStyleEnabled,
 73 |       important: stylesheet[0].includes(".inline.css")
 74 |     }));
 75 | 
 76 |     const _stylesMap = {};
 77 | 
 78 |     styles.forEach(style => (_stylesMap[style.id] = [style]));
 79 |     _stylesMap.length = styles.length;
 80 | 
 81 |     return {
 82 |       prefs: {
 83 |         disableAll:
 84 |           shouldApplyStyleToURL(stylefile, window.location.href) &&
 85 |           !isStyleEnabled
 86 |       },
 87 |       styles: _stylesMap
 88 |     };
 89 |   };
 90 | 
 91 |   function applyOnMessage(message, from, sender, sendResponse) {
 92 |     const request = convertFromStyleURL(
 93 |       typeof message.value !== "undefined" ? message.value : message
 94 |     );
 95 |     let kind = "styleApply";
 96 | 
 97 |     console.log("[CSSManager] RECEIVE STYLE");
 98 | 
 99 |     switch (kind) {
100 |       case "styleDeleted":
101 |         removeStyle(request.styles[1]);
102 |         break;
103 | 
104 |       case "styleUpdated":
105 |         if (request.style.enabled) {
106 |           removeStyle({ id: request.style.id, retire: true });
107 |           requestStyles({ id: request.style.id });
108 |         } else {
109 |           removeStyle(request.style);
110 |         }
111 |         break;
112 | 
113 |       case "styleAdded":
114 |         if (request.style.enabled) {
115 |           requestStyles({ id: request.style.id });
116 |         }
117 |         break;
118 | 
119 |       case "styleApply":
120 |         applyStyles(request.styles);
121 |         break;
122 | 
123 |       case "styleReplaceAll":
124 |         replaceAll(request.styles);
125 |         break;
126 | 
127 |       case "prefChanged":
128 |         if ("disableAll" in request.prefs) {
129 |           doDisableAll(request.prefs.disableAll);
130 |         }
131 |         if ("exposeIframes" in request.prefs) {
132 |           doExposeIframes(request.prefs.exposeIframes);
133 |         }
134 |         break;
135 | 
136 |       case "ping":
137 |         sendResponse(true);
138 |         break;
139 |     }
140 | 
141 |     if (disableAll !== request.prefs.disableAll) {
142 |       doDisableAll(request.prefs.disableAll);
143 |     }
144 |   }
145 | 
146 |   function doDisableAll(disable = disableAll) {
147 |     if (!disable === !disableAll) {
148 |       return;
149 |     }
150 |     disableAll = disable;
151 |     Array.prototype.forEach.call(document.styleSheets, stylesheet => {
152 |       if (
153 |         stylesheet.ownerNode.matches(`style.styleurl[id^="${ID_PREFIX}"]`) &&
154 |         stylesheet.disabled !== disable
155 |       ) {
156 |         stylesheet.disabled = disable;
157 |       }
158 |     });
159 |   }
160 | 
161 |   function doExposeIframes(state = exposeIframes) {
162 |     if (
163 |       state === exposeIframes ||
164 |       (state === true && typeof exposeIframes === "string") ||
165 |       window === parent
166 |     ) {
167 |       return;
168 |     }
169 |     exposeIframes = state;
170 |     const attr = document.documentElement.getAttribute("styleurl-iframe");
171 |     if (state && state !== attr) {
172 |       document.documentElement.setAttribute("styleurl-iframe", state);
173 |     } else if (!state && attr !== undefined) {
174 |       document.documentElement.removeAttribute("styleurl-iframe");
175 |     }
176 |   }
177 | 
178 |   function applyStyleState({ id, enabled }) {
179 |     const inCache = disabledElements.get(id) || styleElements.get(id);
180 |     const inDoc = document.getElementById(ID_PREFIX + id);
181 |     if (enabled) {
182 |       if (inDoc) {
183 |         return;
184 |       } else if (inCache) {
185 |         addStyleElement(inCache);
186 |         disabledElements.delete(id);
187 |       } else {
188 |         requestStyles({ id });
189 |       }
190 |     } else {
191 |       if (inDoc) {
192 |         disabledElements.set(id, inDoc);
193 |         docRootObserver.evade(() => inDoc.remove());
194 |       }
195 |     }
196 |   }
197 | 
198 |   function removeStyle({ id, retire = false }) {
199 |     const el = document.getElementById(ID_PREFIX + id);
200 |     if (el) {
201 |       if (retire) {
202 |         // to avoid page flicker when the style is updated
203 |         // instead of removing it immediately we rename its ID and queue it
204 |         // to be deleted in applyStyles after a new version is fetched and applied
205 |         const deadID = id + "-ghost";
206 |         el.id = ID_PREFIX + deadID;
207 |         // in case something went wrong and new style was never applied
208 |         retiredStyleTimers.set(
209 |           deadID,
210 |           setTimeout(removeStyle, 1000, { id: deadID })
211 |         );
212 |       } else {
213 |         docRootObserver.evade(() => el.remove());
214 |       }
215 |     }
216 |     styleElements.delete(ID_PREFIX + id);
217 |     disabledElements.delete(id);
218 |     retiredStyleTimers.delete(id);
219 |   }
220 | 
221 |   function applyStyles(styles) {
222 |     if (!styles) {
223 |       // Chrome is starting up
224 |       requestStyles();
225 |       return;
226 |     }
227 | 
228 |     if (!document.documentElement) {
229 |       new MutationObserver((mutations, observer) => {
230 |         if (document.documentElement) {
231 |           observer.disconnect();
232 |           applyStyles(styles);
233 |         }
234 |       }).observe(document, { childList: true });
235 |       return;
236 |     }
237 | 
238 |     if ("disableAll" in styles) {
239 |       doDisableAll(styles.disableAll);
240 |     }
241 |     if ("exposeIframes" in styles) {
242 |       doExposeIframes(styles.exposeIframes);
243 |     }
244 | 
245 |     const gotNewStyles = styles.length || styles.needTransitionPatch;
246 |     if (gotNewStyles) {
247 |       if (docRootObserver) {
248 |         docRootObserver.stop();
249 |       } else {
250 |         initDocRootObserver();
251 |       }
252 |     }
253 | 
254 |     if (styles.needTransitionPatch) {
255 |       applyTransitionPatch();
256 |     }
257 | 
258 |     if (gotNewStyles) {
259 |       for (const id in styles) {
260 |         const sections = styles[id];
261 |         if (!Array.isArray(sections)) continue;
262 |         applySections(
263 |           id,
264 |           sections.map(({ code }) => code).join("\n"),
265 |           sections.find(({ important = false }) => !!important)
266 |         );
267 |       }
268 |       docRootObserver.start({ sort: true });
269 |     }
270 | 
271 |     if (!isOwnPage && !docRewriteObserver && styleElements.size) {
272 |       initDocRewriteObserver();
273 |     }
274 | 
275 |     if (retiredStyleTimers.size) {
276 |       setTimeout(() => {
277 |         for (const [id, timer] of retiredStyleTimers.entries()) {
278 |           removeStyle({ id });
279 |           clearTimeout(timer);
280 |         }
281 |       });
282 |     }
283 |   }
284 | 
285 |   function applySections(styleId, code, important) {
286 |     const id = ID_PREFIX + styleId;
287 |     let el = styleElements.get(id) || document.getElementById(id);
288 |     if (el && el.textContent !== code) {
289 |       if (CHROME < 3321) {
290 |         // workaround for Chrome devtools bug fixed in v65
291 |         el.remove();
292 |         el = null;
293 |       } else {
294 |         el.textContent = code;
295 |       }
296 |     }
297 |     if (!el) {
298 |       if (document.documentElement instanceof SVGSVGElement) {
299 |         // SVG document style
300 |         el = document.createElementNS("http://www.w3.org/2000/svg", "style");
301 |       } else if (document instanceof XMLDocument) {
302 |         // XML document style
303 |         el = document.createElementNS("http://www.w3.org/1999/xhtml", "style");
304 |       } else {
305 |         // HTML document style; also works on HTML-embedded SVG
306 |         el = document.createElement("style");
307 |       }
308 |       Object.assign(el, {
309 |         id,
310 |         type: "text/css",
311 |         textContent: code
312 |       });
313 |       // SVG className is not a string, but an instance of SVGAnimatedString
314 |       el.classList.add("styleurl");
315 | 
316 |       if (important) {
317 |         el.classList.add("styleurl--important");
318 |       }
319 | 
320 |       addStyleElement(el, important);
321 |     }
322 |     styleElements.set(id, el);
323 |     disabledElements.delete(Number(styleId));
324 |     return el;
325 |   }
326 | 
327 |   function addStyleElement(newElement, important) {
328 |     if (!ROOT) {
329 |       return;
330 |     }
331 |     let next;
332 |     const newStyleId = getStyleId(newElement);
333 |     for (const el of styleElements.values()) {
334 |       if (
335 |         el.parentNode &&
336 |         !el.id.endsWith("-ghost") &&
337 |         getStyleId(el) > newStyleId
338 |       ) {
339 |         next = el.parentNode === ROOT ? el : null;
340 |         break;
341 |       }
342 |     }
343 |     if (next === newElement.nextElementSibling) {
344 |       return;
345 |     }
346 |     docRootObserver.evade(() => {
347 |       ROOT.insertBefore(newElement, next || null);
348 |       if (disableAll) {
349 |         newElement.disabled = true;
350 |       }
351 |     });
352 |   }
353 | 
354 |   function replaceAll(newStyles) {
355 |     if (
356 |       "disableAll" in newStyles &&
357 |       disableAll === newStyles.disableAll &&
358 |       styleElements.size === countStylesInHash(newStyles) &&
359 |       [...styleElements.values()].every(
360 |         el =>
361 |           el.disabled === disableAll &&
362 |           el.parentNode === ROOT &&
363 |           el.textContent ===
364 |             (newStyles[getStyleId(el)] || []).map(({ code }) => code).join("\n")
365 |       )
366 |     ) {
367 |       return;
368 |     }
369 |     const oldStyles = Array.prototype.slice.call(
370 |       document.querySelectorAll(`style.styleurl[id^="${ID_PREFIX}"]`)
371 |     );
372 |     oldStyles.forEach(el => (el.id += "-ghost"));
373 |     styleElements.clear();
374 |     disabledElements.clear();
375 |     [...retiredStyleTimers.values()].forEach(clearTimeout);
376 |     retiredStyleTimers.clear();
377 |     applyStyles(newStyles);
378 |     docRootObserver.evade(() => oldStyles.forEach(el => el.remove()));
379 |   }
380 | 
381 |   function applyTransitionPatch() {
382 |     // CSS transition bug workaround: since we insert styles asynchronously,
383 |     // the browsers, especially Firefox, may apply all transitions on page load
384 |     const className = chrome.runtime.id + "-transition-bug-fix";
385 |     const docId = document.documentElement.id
386 |       ? "#" + document.documentElement.id
387 |       : "";
388 |     document.documentElement.classList.add(className);
389 |     applySections(
390 |       0,
391 |       `
392 |         ${docId}.${className}:root * {
393 |           transition: none !important;
394 |         }
395 |       `
396 |     );
397 |     setTimeout(() => {
398 |       removeStyle({ id: 0 });
399 |       document.documentElement.classList.remove(className);
400 |     });
401 |   }
402 | 
403 |   function getStyleId(el) {
404 |     return parseInt(el.id.substr(ID_PREFIX.length));
405 |   }
406 | 
407 |   function countStylesInHash(styleHash) {
408 |     let num = 0;
409 |     for (const k in styleHash) {
410 |       num += !isNaN(parseInt(k)) ? 1 : 0;
411 |     }
412 |     return num;
413 |   }
414 | 
415 |   function orphanCheck() {
416 |     if (chrome.i18n && chrome.i18n.getUILanguage()) {
417 |       return true;
418 |     }
419 |     // In Chrome content script is orphaned on an extension update/reload
420 |     // so we need to detach event listeners
421 |     [docRewriteObserver, docRootObserver].forEach(ob => ob && ob.disconnect());
422 |     window.removeEventListener(chrome.runtime.id, orphanCheck, true);
423 |     try {
424 |       chrome.runtime.onMessage.removeListener(applyOnMessage);
425 |     } catch (e) {}
426 |   }
427 | 
428 |   function initDocRewriteObserver() {
429 |     // detect documentElement being rewritten from inside the script
430 |     docRewriteObserver = new MutationObserver(mutations => {
431 |       for (let m = mutations.length; --m >= 0; ) {
432 |         const added = mutations[m].addedNodes;
433 |         for (let n = added.length; --n >= 0; ) {
434 |           if (added[n].localName === "html") {
435 |             reinjectStyles();
436 |             return;
437 |           }
438 |         }
439 |       }
440 |     });
441 |     docRewriteObserver.observe(document, { childList: true });
442 |     // detect dynamic iframes rewritten after creation by the embedder i.e. externally
443 |     setTimeout(() => {
444 |       if (document.documentElement !== ROOT) {
445 |         reinjectStyles();
446 |       }
447 |     });
448 |     // re-add styles if we detect documentElement being recreated
449 |     function reinjectStyles() {
450 |       if (!styleElements) {
451 |         orphanCheck();
452 |         return;
453 |       }
454 |       ROOT = document.documentElement;
455 |       docRootObserver.stop();
456 |       const imported = [];
457 |       for (const [id, el] of styleElements.entries()) {
458 |         const copy = document.importNode(el, true);
459 |         el.textContent += " "; // invalidate CSSOM cache
460 |         imported.push([id, copy]);
461 |         addStyleElement(copy);
462 |       }
463 |       docRootObserver.start();
464 |       styleElements = new Map(imported);
465 |     }
466 |   }
467 | 
468 |   function initDocRootObserver() {
469 |     let lastRestorationTime = 0;
470 |     let restorationCounter = 0;
471 |     let observing = false;
472 |     let sorting = false;
473 |     let observer;
474 |     // allow any types of elements between ours, except for the following:
475 |     const ORDERED_TAGS = ["head", "body", "frameset", "style", "link"];
476 | 
477 |     init();
478 |     return;
479 | 
480 |     function init() {
481 |       observer = new MutationObserver(sortStyleElements);
482 |       docRootObserver = { start, stop, evade, disconnect: stop };
483 |       setTimeout(sortStyleElements);
484 |     }
485 |     function start({ sort = false } = {}) {
486 |       if (sort && sortStyleMap()) {
487 |         sortStyleElements();
488 |       }
489 |       if (!observing && ROOT && observer) {
490 |         observer.observe(ROOT, { childList: true });
491 |         observing = true;
492 |       }
493 |     }
494 |     function stop() {
495 |       if (observing) {
496 |         observer.takeRecords();
497 |         observer.disconnect();
498 |         observing = false;
499 |       }
500 |     }
501 |     function evade(fn) {
502 |       const wasObserving = observing;
503 |       if (observing) {
504 |         stop();
505 |       }
506 |       fn();
507 |       if (wasObserving) {
508 |         start();
509 |       }
510 |     }
511 |     function sortStyleMap() {
512 |       const list = [];
513 |       let prevStyleId = 0;
514 |       let needsSorting = false;
515 |       for (const entry of styleElements.entries()) {
516 |         list.push(entry);
517 |         const el = entry[1];
518 |         const styleId = getStyleId(el);
519 |         el.styleId = styleId;
520 |         needsSorting |= styleId < prevStyleId;
521 |         prevStyleId = styleId;
522 |       }
523 |       if (needsSorting) {
524 |         styleElements = new Map(
525 |           list.sort((a, b) => a[1].styleId - b[1].styleId)
526 |         );
527 |         return true;
528 |       }
529 |     }
530 |     function sortStyleElements() {
531 |       if (!observing) {
532 |         return;
533 |       }
534 |       let prevExpected = document.documentElement.lastElementChild;
535 |       while (prevExpected && isSkippable(prevExpected, true)) {
536 |         prevExpected = prevExpected.previousElementSibling;
537 |       }
538 |       if (!prevExpected) {
539 |         return;
540 |       }
541 |       for (let el of styleElements.values()) {
542 |         if (!isMovable(el)) {
543 |           continue;
544 |         }
545 |         while (true) {
546 |           const next = prevExpected.nextElementSibling;
547 |           if (next && isSkippable(next)) {
548 |             prevExpected = next;
549 |           } else if (
550 |             next === el ||
551 |             (next === el.previousElementSibling && next) ||
552 |             moveAfter(el, next || prevExpected)
553 |           ) {
554 |             prevExpected = el;
555 |             break;
556 |           } else {
557 |             return;
558 |           }
559 |         }
560 |       }
561 |       if (sorting) {
562 |         sorting = false;
563 |         if (observer) observer.takeRecords();
564 |         if (!restorationLimitExceeded()) {
565 |           start();
566 |         } else {
567 |           setTimeout(start, 1000);
568 |         }
569 |       }
570 |     }
571 |     function isMovable(el) {
572 |       return !!(el.parentNode || !disabledElements.has(getStyleId(el)));
573 |     }
574 |     function isSkippable(el, skipOwnStyles) {
575 |       return (
576 |         !ORDERED_TAGS.includes(el.localName) ||
577 |         (el.id.startsWith(ID_PREFIX) &&
578 |           (skipOwnStyles || el.id.endsWith("-ghost")) &&
579 |           el.localName === "style" &&
580 |           el.className === "styleurl")
581 |       );
582 |     }
583 |     function moveAfter(el, expected) {
584 |       if (!sorting) {
585 |         sorting = true;
586 |         stop();
587 |       }
588 |       expected.insertAdjacentElement("afterend", el);
589 |       if (el.disabled !== disableAll) {
590 |         // moving an element resets its 'disabled' state
591 |         el.disabled = disableAll;
592 |       }
593 | 
594 |       if (el.className.includes("styleurl--important")) {
595 |         makeAllRulesImportant(el);
596 |       }
597 |       return true;
598 |     }
599 |     function restorationLimitExceeded() {
600 |       const t = performance.now();
601 |       if (t - lastRestorationTime > 1000) {
602 |         restorationCounter = 0;
603 |       }
604 |       lastRestorationTime = t;
605 |       return ++restorationCounter > 5;
606 |     }
607 |   }
608 | })();
609 | 


--------------------------------------------------------------------------------
/chrome/extension/devtools.js:
--------------------------------------------------------------------------------
  1 | import Messenger from "chrome-ext-messenger";
  2 | import Hashes from "jshashes";
  3 | import _ from "lodash";
  4 | import { MESSAGE_TYPES, PORT_TYPES } from "./lib/port";
  5 | const messenger = new Messenger();
  6 | const SHA256 = new Hashes.SHA256();
  7 | 
  8 | let connection;
  9 | 
 10 | const log = (...messages) => {
 11 |   connection.sendMessage(`background:${PORT_TYPES.devtool_widget}`, {
 12 |     kind: MESSAGE_TYPES.log,
 13 |     value: ["[DEVTOOLS]", ...messages]
 14 |   });
 15 | };
 16 | 
 17 | const isResourceStyle = resource => resource && resource.type === "stylesheet";
 18 | 
 19 | const isInspectorStyle = resource => {
 20 |   const isStylesheet =
 21 |     resource.url.startsWith("inspector://") && isResourceStyle(resource);
 22 |   return isStylesheet;
 23 | };
 24 | 
 25 | const isGeneralStyle = resource => {
 26 |   const isStylesheet =
 27 |     resource.url.startsWith("inspector://") === false &&
 28 |     isResourceStyle(resource);
 29 |   return isStylesheet;
 30 | };
 31 | 
 32 | const getResources = () =>
 33 |   new Promise((resolve, reject) =>
 34 |     chrome.devtools.inspectedWindow.getResources(resources => {
 35 |       resolve(resources);
 36 |     })
 37 |   );
 38 | 
 39 | const getResourceUrl = resource => {
 40 |   let resourceUrl = resource.url;
 41 |   if (resourceUrl.startsWith("data:")) {
 42 |     resourceUrl = `datauri-${SHA256.hex(resourceUrl)}` + ".css";
 43 |   }
 44 |   return resourceUrl;
 45 | };
 46 | 
 47 | const getResourceContent = resource =>
 48 |   new Promise((resolve, reject) => {
 49 |     const resourceUrl = getResourceUrl(resource);
 50 |     log("GET", resourceUrl);
 51 |     resource.getContent(content => {
 52 |       resolve({
 53 |         url: resourceUrl,
 54 |         content
 55 |       });
 56 |     });
 57 |   });
 58 | 
 59 | // Warning --
 60 | // This gets called in browser context, do not use es modules here
 61 | const getStyleTagsInBrowser = () => {
 62 |   const __extractedStyles = document.styleSheets;
 63 |   const styles = {};
 64 |   Object.keys(__extractedStyles).map(ind => {
 65 |     const ss = __extractedStyles[ind];
 66 |     // ignore:
 67 |     // - non-style tags
 68 |     // - empty style tags (those are not editable from devtools)
 69 |     if (
 70 |       typeof ss.href === "string" ||
 71 |       !ss.ownerNode ||
 72 |       ss.ownerNode.innerHTML.length === 0 ||
 73 |       (ss.ownerNode.id && ss.ownerNode.id.includes("__styleurl"))
 74 |     ) {
 75 |       return null;
 76 |     }
 77 | 
 78 |     let id = ss.ownerNode.dataset.styleurl_id;
 79 |     if (!id) {
 80 |       id = ss.ownerNode.id ? ss.ownerNode.id : `styletag_${ind}`;
 81 | 
 82 |       if (!!document.querySelector(`[data-style_url="${id}"`)) {
 83 |         id = `styletag_${Math.random()
 84 |           .toString(36)
 85 |           .replace(/[^a-z]+/g, "")
 86 |           .substr(0, 5)}`;
 87 |       }
 88 | 
 89 |       ss.ownerNode.dataset.styleurl_id = id;
 90 |     }
 91 | 
 92 |     const content = Object.keys(ss.cssRules)
 93 |       .map(sind => ss.cssRules[sind].cssText)
 94 |       .join("\n");
 95 | 
 96 |     styles[id] = content;
 97 |   });
 98 |   return styles;
 99 | };
100 | 
101 | const getStyleTags = () =>
102 |   new Promise(resolve => {
103 |     chrome.tabs.executeScript(
104 |       chrome.devtools.inspectedWindow.tabId,
105 |       {
106 |         code: `((${getStyleTagsInBrowser.toString()})())`
107 |       },
108 |       ds => {
109 |         const styleTags = ds[0];
110 | 
111 |         resolve(
112 |           _.keys(styleTags).map(key => {
113 |             return { url: key, content: styleTags[key] };
114 |           })
115 |         );
116 |       }
117 |     );
118 |   });
119 | 
120 | const getLoadedSheets = () => {
121 |   return getResources()
122 |     .then(resources => resources.filter(isGeneralStyle))
123 |     .then(stylesheets => Promise.all(stylesheets.map(getResourceContent)))
124 |     .catch(error => alert(error));
125 | };
126 | 
127 | const getGeneralStyles = () =>
128 |   new Promise((resolve, reject) => {
129 |     Promise.all([getStyleTags(), getLoadedSheets()]).then(allStyles => {
130 |       const filteredStyles = _
131 |         .compact(_.flatten(allStyles))
132 |         .map(({ content, url }) => ({ url, content: content }));
133 |       return resolve(filteredStyles);
134 |     });
135 |   });
136 | 
137 | const getInspectorStyles = () => {
138 |   return getResources()
139 |     .then(resources => resources.filter(isInspectorStyle))
140 |     .then(stylesheets => Promise.all(stylesheets.map(getResourceContent)))
141 |     .catch(error => alert(error));
142 | };
143 | 
144 | const createConnection = () => {
145 |   return messenger.initConnection(
146 |     PORT_TYPES.devtool_widget,
147 |     handleReceivedMessage
148 |   );
149 | };
150 | 
151 | const handleReceivedMessage = (request, from, sender, sendResponse) => {
152 |   if (request.kind === MESSAGE_TYPES.get_current_styles_diff) {
153 |     Promise.all([getInspectorStyles(), getGeneralStyles()]).then(promises => {
154 |       sendResponse({
155 |         kind: MESSAGE_TYPES.get_current_styles_diff,
156 |         response: true,
157 |         value: {
158 |           ...request.value,
159 |           stylesheets: promises[0],
160 |           general_stylesheets: promises[1]
161 |         }
162 |       });
163 |     });
164 |   }
165 | };
166 | 
167 | const sendStyleDiffChangedEvent = el => {
168 |   if (isResourceStyle(el)) {
169 |     getInspectorStyles().then(stylesheets => {
170 |       if (!connection) {
171 |         return;
172 |       }
173 | 
174 |       connection.sendMessage(`background:${PORT_TYPES.devtool_widget}`, {
175 |         kind: MESSAGE_TYPES.style_diff_changed,
176 |         value: {
177 |           stylesheets
178 |         }
179 |       });
180 |     });
181 |   }
182 | };
183 | 
184 | const sendContentStyles = () => {
185 |   return new Promise(resolve => {
186 |     getGeneralStyles().then(stylesheets => {
187 |       if (!connection) {
188 |         return;
189 |       }
190 | 
191 |       connection.sendMessage(`background:${PORT_TYPES.devtool_widget}`, {
192 |         kind: MESSAGE_TYPES.send_content_stylesheets,
193 |         value: stylesheets
194 |       });
195 |       resolve();
196 |     });
197 |   });
198 | };
199 | 
200 | const sendSelectedElementToContentScript = () => {
201 |   chrome.devtools.inspectedWindow.eval(
202 |     ` window.__styleurlSelectedElement = $0;
203 |       window.__styleurlSetSelected && window.__styleurlSetSelected($0);`,
204 |     {
205 |       useContentScriptContext: true
206 |     }
207 |   );
208 | };
209 | 
210 | const setupConnection = () => {
211 |   connection = createConnection();
212 | 
213 |   sendContentStyles();
214 |   sendStyleDiffChangedEvent();
215 |   sendSelectedElementToContentScript();
216 | };
217 | 
218 | chrome.devtools.network.onNavigated.addListener(function() {
219 |   if (connection) {
220 |     connection.disconnect();
221 |   }
222 | 
223 |   if (_.isNumber(chrome.devtools.inspectedWindow.tabId)) {
224 |     setupConnection();
225 |   }
226 | });
227 | 
228 | chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
229 |   sendStyleDiffChangedEvent
230 | );
231 | 
232 | chrome.devtools.inspectedWindow.onResourceAdded.addListener(
233 |   sendStyleDiffChangedEvent
234 | );
235 | 
236 | const contentStyleListener = resource => {
237 |   if (resource.url.startsWith("debugger://")) {
238 |     return;
239 |   }
240 |   log("CONTENT COMMITTED", resource ? resource.url : null);
241 |   sendContentStyles(resource).then(() => {
242 |     connection.sendMessage(`background:${PORT_TYPES.devtool_widget}`, {
243 |       kind: MESSAGE_TYPES.open_style_editor
244 |     });
245 | 
246 |     connection.sendMessage(
247 |       `content_script:${PORT_TYPES.inline_header}:${
248 |         chrome.devtools.inspectedWindow.tabId
249 |       }`,
250 |       { kind: MESSAGE_TYPES.style_diff_changed }
251 |     );
252 | 
253 |     connection.sendMessage(`background:${PORT_TYPES.devtool_widget}`, {
254 |       kind: MESSAGE_TYPES.style_diff_changed
255 |     });
256 |   });
257 | };
258 | 
259 | chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
260 |   _.debounce(contentStyleListener, 150)
261 | );
262 | setupConnection();
263 | 
264 | chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
265 |   sendSelectedElementToContentScript();
266 | });
267 | 


--------------------------------------------------------------------------------
/chrome/extension/github_gist_content_script.js:
--------------------------------------------------------------------------------
  1 | // Privacy Notice
  2 | // StyleURL does *not* send all gists the user opens to StyleURL's server.
  3 | // Before requesting the contents of the gist, StyleURL looks for "Stylefile.yml" or "Stylefile" to assess whether or not it might be a StyleURL
  4 | // Only when it does find a matching filename, it requests the content of the stylesheets
  5 | // We want to protect user's privacy as much as possible, even if its a little more work for us.
  6 | import { MESSAGE_TYPES, PORT_TYPES } from "./lib/port";
  7 | import { SPECIAL_QUERY_PARAMS, STYLEFILE_NAMES } from "./lib/gists";
  8 | import { loadStylefileFromString } from "./lib/stylefile";
  9 | import Messenger from "chrome-ext-messenger";
 10 | 
 11 | const messenger = new Messenger();
 12 | const connection = messenger.initConnection(PORT_TYPES.github_gist);
 13 | 
 14 | const getGistID = () => window.location.pathname.split("/")[2];
 15 | 
 16 | const buildShareURL = (stylefile, gistID) => {
 17 |   return `${__FRONTEND_HOST__}/${stylefile.domains[0]}/${gistID}`;
 18 | };
 19 | 
 20 | const buildStyleURL = styleFile => {
 21 |   const originalURL = styleFile.redirect_url;
 22 | 
 23 |   const queryString = originalURL.includes("?")
 24 |     ? originalURL.split("?")[1]
 25 |     : "";
 26 |   const searchParams = new URLSearchParams(queryString);
 27 | 
 28 |   searchParams.append(SPECIAL_QUERY_PARAMS.gist_id, `gist_${getGistID()}`);
 29 | 
 30 |   return `${originalURL}?${searchParams.toString()}`;
 31 | };
 32 | 
 33 | const log = (...messages) =>
 34 |   console.log.apply(console, ["[StyleURL]", ...messages]);
 35 | 
 36 | const renderStyleURLBar = (styleFile, gistID) => {
 37 |   log("Detected Stylefile", styleFile);
 38 | 
 39 |   const div = document.createElement("div");
 40 |   div.innerHTML = `<div style="background-color: #0366d6; padding-top: 14px; padding-bottom: 14px;"><div class="container-lg px-3 clearfix"><div id="styleurl_bar_root" style="display: flex; justify-content: space-between; align-items: center; color white;">
 41 |   <div style="font-size: 18px; white-space: nowrap; color: white;">Apply this StyleURL on <strong>${
 42 |     styleFile.domains[0]
 43 |   }</strong>?</div>
 44 | 
 45 |   <div style="display: flex; align-items: center;">
 46 |   <a href="${buildShareURL(
 47 |     styleFile,
 48 |     gistID
 49 |   )}" class="btn-link" style="color: white; margin-right: 14px; font-weight: bold; text-decoration: underline;">Share StyleURL</a>
 50 |   <a href="${buildStyleURL(styleFile)}" class="btn">Apply StyleURL</a>
 51 | 
 52 |   </div>
 53 | </div></div></div>`;
 54 |   document.body.prepend(div);
 55 | };
 56 | 
 57 | // Hard to know 100% of the time whether or not we're on the gist page
 58 | const isGistPage = pathname => {
 59 |   const parts = pathname.split("/");
 60 |   const isCorrectLength = parts.length === 3; // ["", "User-Name", "hash"]
 61 | 
 62 |   if (!isCorrectLength) {
 63 |     return false;
 64 |   }
 65 | 
 66 |   const gistId = parts[2];
 67 | 
 68 |   return gistId.length > 5;
 69 | };
 70 | 
 71 | const isRawDownloadLink = pathname => {
 72 |   return pathname.includes("/raw/");
 73 | };
 74 | 
 75 | const getGistFilenames = () => {
 76 |   return window
 77 |     .fetch(window.location.pathname + ".json")
 78 |     .then(resp => resp.json(), () => false)
 79 |     .then(
 80 |       gist => {
 81 |         if (!gist || !gist.files) {
 82 |           return [];
 83 |         }
 84 | 
 85 |         return gist.files || [];
 86 |       },
 87 |       () => []
 88 |     );
 89 | };
 90 | 
 91 | const getFileURL = filename => {
 92 |   const files = Array.from(document.querySelectorAll(".file-box"));
 93 | 
 94 |   const fileBox = files.find(fileBox =>
 95 |     Array.from(fileBox.querySelectorAll(".file-info .gist-blob-name")).find(
 96 |       element => element.innerText === filename
 97 |     )
 98 |   );
 99 | 
100 |   if (!fileBox) {
101 |     return null;
102 |   }
103 | 
104 |   const rawFileLink = Array.from(
105 |     fileBox.querySelectorAll(".file-actions a.btn")
106 |   ).find(element => isRawDownloadLink(element.href));
107 | 
108 |   if (!rawFileLink) {
109 |     return null;
110 |   }
111 | 
112 |   return rawFileLink.href;
113 | };
114 | 
115 | const getGistFileContents = filename => {
116 |   return connection
117 |     .sendMessage(`background:${PORT_TYPES.github_gist}`, {
118 |       kind: MESSAGE_TYPES.get_gist_content,
119 |       url: getFileURL(filename)
120 |     })
121 |     .then(({ value }) => {
122 |       return value;
123 |     });
124 | };
125 | 
126 | if (isGistPage(location.pathname)) {
127 |   getGistFilenames().then(fileNames => {
128 |     if (!fileNames) {
129 |       return null;
130 |     }
131 | 
132 |     const filename = fileNames.find(name => STYLEFILE_NAMES.indexOf(name) > -1);
133 |     if (!filename) {
134 |       return;
135 |     }
136 | 
137 |     getGistFileContents(filename)
138 |       .then(yaml => {
139 |         return loadStylefileFromString(yaml);
140 |       })
141 |       .then(styleFile => {
142 |         if (!styleFile) {
143 |           return;
144 |         }
145 | 
146 |         renderStyleURLBar(styleFile, getGistID());
147 |       });
148 |   });
149 | }
150 | 


--------------------------------------------------------------------------------
/chrome/extension/inject_create_styleurl.js:
--------------------------------------------------------------------------------
 1 | import { injectShadowDOM } from "./lib/injectShadowDom";
 2 | import CreateStyleURL from "./create_styleurl/CreateStyleURL";
 3 | import "./create_styleurl.css";
 4 | import injectScriptNames from "./lib/injectScriptNames";
 5 | 
 6 | injectShadowDOM({
 7 |   id: injectScriptNames.inject_create_styleurl,
 8 |   Component: CreateStyleURL,
 9 |   include: chrome.extension.getURL("/inject_create_styleurl.css")
10 | });
11 | 


--------------------------------------------------------------------------------
/chrome/extension/inject_view_styleurl.js:
--------------------------------------------------------------------------------
 1 | import { injectShadowDOM } from "./lib/injectShadowDom";
 2 | import injectScriptNames from "./lib/injectScriptNames";
 3 | import ViewStyleURLContainer from "./view_styleurl/ViewStyleURL";
 4 | 
 5 | injectShadowDOM({
 6 |   id: injectScriptNames.inject_view_styleurl,
 7 |   Component: ViewStyleURLContainer,
 8 |   include: chrome.extension.getURL("/inject_view_styleurl.css")
 9 | });
10 | 


--------------------------------------------------------------------------------
/chrome/extension/inline_style_observer.js:
--------------------------------------------------------------------------------
 1 | import { InlineStyleObserverManager } from "./inline_style_observer/inline_style_observer_manager";
 2 | 
 3 | const startManager = () => {
 4 |   window.__InlineStyleObserverManager = new InlineStyleObserverManager();
 5 | };
 6 | 
 7 | if (!window.__InlineStyleObserverManager) {
 8 |   startManager();
 9 | }
10 | 


--------------------------------------------------------------------------------
/chrome/extension/inline_style_observer/inline_style_observer.js:
--------------------------------------------------------------------------------
 1 | import { getSingleSelector } from "optimal-select";
 2 | 
 3 | export class InlineStyleObserver {
 4 |   constructor(onChange) {
 5 |     this.changeSet = {};
 6 |     this._observer = null;
 7 |     this.observing = false;
 8 | 
 9 |     this.onChange = onChange;
10 |   }
11 | 
12 |   setSelectedElement = element => {
13 |     const wasObserving = this.observing;
14 |     if (wasObserving) {
15 |       this.stop();
16 |     }
17 | 
18 |     this.selectedElement = element;
19 | 
20 |     this.start();
21 |   };
22 | 
23 |   start = () => {
24 |     if (!this._observer) {
25 |       this._observer = new MutationObserver(this.handleMutation);
26 |     }
27 | 
28 |     if (this.observing || !this.selectedElement) {
29 |       return;
30 |     }
31 | 
32 |     this._observer.observe(this.selectedElement, {
33 |       attributes: true,
34 |       attributeOldValue: true,
35 |       attributeFilter: ["style"]
36 |     });
37 | 
38 |     this.observing = true;
39 |   };
40 | 
41 |   stop = () => {
42 |     if (!this.observing || !this._observer) {
43 |       return;
44 |     }
45 | 
46 |     this._observer.disconnect();
47 |     this.observing = false;
48 |   };
49 | 
50 |   handleMutation = mutations => {
51 |     mutations.forEach(mutation => {
52 |       if (mutation.attributeName !== "style") {
53 |         return;
54 |       }
55 | 
56 |       if (!mutation.target) {
57 |         return;
58 |       }
59 | 
60 |       const selector = getSingleSelector(mutation.target);
61 | 
62 |       if (!this.changeSet[selector]) {
63 |         this.changeSet[selector] = {
64 |           selector,
65 |           before: mutation.oldValue,
66 |           after: mutation.target.style.cssText
67 |         };
68 |       }
69 | 
70 |       this.changeSet[selector].after = mutation.target.style.cssText;
71 |     });
72 | 
73 |     this.onChange(this.changeSet);
74 |   };
75 | }
76 | 


--------------------------------------------------------------------------------
/chrome/extension/inline_style_observer/inline_style_observer_manager.js:
--------------------------------------------------------------------------------
  1 | import Messenger from "chrome-ext-messenger";
  2 | import { PORT_TYPES, MESSAGE_TYPES } from "../lib/port";
  3 | import { InlineStyleObserver } from "./inline_style_observer";
  4 | 
  5 | const buildRuleFromSelectorAndCssText = (selector, text) => {
  6 |   return `${selector} { ${text} }`;
  7 | };
  8 | 
  9 | export class InlineStyleObserverManager {
 10 |   constructor() {
 11 |     this._messenger = new Messenger();
 12 |     this._connection = this._messenger.initConnection(
 13 |       PORT_TYPES.inline_style_observer,
 14 |       this.handleMessage
 15 |     );
 16 |     this.oldStylesheet = null;
 17 |     this.newStylesheet = null;
 18 |     this._observer = new InlineStyleObserver(this.handleChange);
 19 | 
 20 |     if (window.__styleurlSelectedElement) {
 21 |       this._observer.setSelectedElement(window.__styleurlSelectedElement);
 22 |     }
 23 | 
 24 |     window.__styleurlSetSelected = this._observer.setSelectedElement;
 25 |   }
 26 | 
 27 |   _sendMessage = message => {
 28 |     return this._connection.sendMessage(
 29 |       `background:${PORT_TYPES.inline_style_observer}`,
 30 |       message
 31 |     );
 32 |   };
 33 | 
 34 |   handleMessage = async (request, from, sender, sendResponse) => {
 35 |     const { kind } = request;
 36 | 
 37 |     if (kind === MESSAGE_TYPES.start_observing_inline_styles) {
 38 |       this._observer.start();
 39 |     } else if (kind === MESSAGE_TYPES.stop_observing_inline_styles) {
 40 |       this._observer.stop();
 41 |     } else if (kind === MESSAGE_TYPES.get_inline_style_diff) {
 42 |       sendResponse({
 43 |         kind: MESSAGE_TYPES.get_inline_style_diff,
 44 |         value: {
 45 |           old_stylesheet: this.oldStylesheet,
 46 |           new_stylesheet: this.newStylesheet
 47 |         }
 48 |       });
 49 |     }
 50 |   };
 51 | 
 52 |   handleChange = changes => {
 53 |     // So....theres no CSS file here -- because the styles are inline!
 54 |     // But, we're going to be exporting as a stylesheet, so we're just going to make it look like we're sending over a stylesheet
 55 | 
 56 |     const oldStylesheet = {
 57 |       url: "inline_style_edits.inline.css"
 58 |     };
 59 | 
 60 |     const newStylesheet = {
 61 |       url: "inline_style_edits.inline.css"
 62 |     };
 63 | 
 64 |     const oldRules = [];
 65 |     const newRules = [];
 66 | 
 67 |     // Ignore the ones we don't have a selector for...sorry.
 68 |     Object.values(changes)
 69 |       .filter(({ selector }) => !!selector)
 70 |       .forEach(change => {
 71 |         if (change.before) {
 72 |           oldRules.push(
 73 |             buildRuleFromSelectorAndCssText(change.selector, change.before)
 74 |           );
 75 |         } else {
 76 |           oldRules.push(buildRuleFromSelectorAndCssText(change.selector, ""));
 77 |         }
 78 | 
 79 |         if (change.after) {
 80 |           newRules.push(
 81 |             buildRuleFromSelectorAndCssText(change.selector, change.after)
 82 |           );
 83 |         } else {
 84 |           newRules.push(buildRuleFromSelectorAndCssText(change.selector, ""));
 85 |         }
 86 |       });
 87 | 
 88 |     oldStylesheet.content = oldRules.join("\n");
 89 |     newStylesheet.content = newRules.join("\n");
 90 | 
 91 |     this.oldStylesheet = oldStylesheet;
 92 |     this.newStylesheet = newStylesheet;
 93 | 
 94 |     if (newStylesheet.content) {
 95 |       this._sendMessage({
 96 |         kind: MESSAGE_TYPES.style_diff_changed
 97 |       });
 98 |     }
 99 |   };
100 | }
101 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/StyleURLTab.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   getGistById,
  3 |   loadStylefileFromGist,
  4 |   getStylesheetsFromGist
  5 | } from "./gists";
  6 | import { shouldApplyStyleToURL } from "./stylefile";
  7 | import { injectCSSManager } from "../background/inject";
  8 | import { MESSAGE_TYPES, PORT_TYPES } from "./port";
  9 | 
 10 | const TAB_IDS_TO_STYLEURL = {};
 11 | 
 12 | const applyStylesheetToTabId = (stylesheet, tabId) => {
 13 |   const content = stylesheet[1];
 14 |   chrome.tabs.insertCSS(
 15 |     tabId,
 16 |     {
 17 |       cssOrigin: "user",
 18 |       code: content,
 19 |       allFrames: true,
 20 |       runAt: "document_end"
 21 |     },
 22 |     (...args) => {
 23 |       console.log("Inserted Stylesheet into tab", tabId, {
 24 |         stylesheet: content
 25 |       });
 26 |     }
 27 |   );
 28 | };
 29 | 
 30 | export class StyleURL {
 31 |   constructor({ gistId }) {
 32 |     this.gistId = gistId;
 33 | 
 34 |     this.isBarEnabled = true;
 35 |     this.isStyleEnabled = true;
 36 |     this._appliedToURLs = {};
 37 |   }
 38 | 
 39 |   toJSON = () => {
 40 |     return {
 41 |       gistId: this.gistId,
 42 |       gist: this.gist,
 43 |       isBarEnabled: this.isBarEnabled,
 44 |       isStyleEnabled: this.isStyleEnabled,
 45 |       stylefile: this.stylefile,
 46 |       stylesheets: this.stylesheets,
 47 |       appliedToURLS: this._appliedToURLs
 48 |     };
 49 |   };
 50 | 
 51 |   setAppliedToURL = (url, didApply) => {
 52 |     this._appliedToURLs[url] = !!didApply;
 53 | 
 54 |     return !!didApply;
 55 |   };
 56 | 
 57 |   load = async gistId => {
 58 |     const gist = await getGistById(gistId);
 59 |     this.gist = gist;
 60 |     this.stylefile = loadStylefileFromGist(gist);
 61 |     this.stylesheets = getStylesheetsFromGist(gist);
 62 |     this.loaded = true;
 63 |   };
 64 | 
 65 |   applyToTab = (tab, connection) => {
 66 |     if (!this.canApplyStyle(tab.url)) {
 67 |       return this.setAppliedToURL(tab.url, false);
 68 |     }
 69 | 
 70 |     injectCSSManager(tab.tabId);
 71 |     if (connection) {
 72 |       connection.sendMessage(
 73 |         `content_script:${PORT_TYPES.stylesheet_manager}:${tab.tabId}`,
 74 |         {
 75 |           kind: MESSAGE_TYPES.get_styleurl,
 76 |           value: this.toJSON()
 77 |         }
 78 |       );
 79 |     }
 80 | 
 81 |     return this.setAppliedToURL(tab.url, true);
 82 |   };
 83 | 
 84 |   canApplyStyle = url => {
 85 |     return !!this.stylefile && shouldApplyStyleToURL(this.stylefile, url);
 86 |   };
 87 | }
 88 | 
 89 | export const styleURLsForTabId = tabId => {
 90 |   return TAB_IDS_TO_STYLEURL[tabId] || [];
 91 | };
 92 | 
 93 | export const startMonitoringTabID = async ({ tabId, gistId }) => {
 94 |   if (!TAB_IDS_TO_STYLEURL[tabId]) {
 95 |     TAB_IDS_TO_STYLEURL[tabId] = [];
 96 |   }
 97 | 
 98 |   const existingStyleURLTab = TAB_IDS_TO_STYLEURL[tabId].find(
 99 |     tab => tab.gistId === gistId
100 |   );
101 |   if (existingStyleURLTab) {
102 |     return existingStyleURLTab;
103 |   } else {
104 |     const styleUrlTab = new StyleURL({ gistId });
105 |     TAB_IDS_TO_STYLEURL[tabId].push(styleUrlTab);
106 |     await styleUrlTab.load(gistId);
107 | 
108 |     return styleUrlTab;
109 |   }
110 | };
111 | 
112 | export const stopMonitoringTabID = tabId => {
113 |   if (TAB_IDS_TO_STYLEURL[tabId] && TAB_IDS_TO_STYLEURL[tabId].length === 0) {
114 |     delete TAB_IDS_TO_STYLEURL[tabId];
115 |   }
116 | };
117 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/api.js:
--------------------------------------------------------------------------------
 1 | import S3Upload from "react-s3-uploader/s3upload";
 2 | 
 3 | const uploaders = {};
 4 | export const SCREENSHOT_CONTENT_TYPE = "image/png";
 5 | 
 6 | export const buildURL = path => {
 7 |   return __API_HOST__ + path;
 8 | };
 9 | 
10 | const apiFetch = (path, options = {}) => {
11 |   const headers = new Headers(options.headers || {});
12 |   headers.append(
13 |     "User-Agent",
14 |     `StyleURL v${chrome.app.getDetails().version} (${process.env.NODE_ENV})`
15 |   );
16 |   headers.append("Content-Type", "application/json");
17 |   headers.append("X-StyleURL-Version", chrome.app.getDetails().version);
18 | 
19 |   return window
20 |     .fetch(buildURL(path), {
21 |       ...options,
22 |       credentials: "include",
23 |       redirect: "follow",
24 |       headers
25 |     })
26 |     .then(response => response.json())
27 |     .catch(error => {
28 |       console.error(error);
29 |       return {
30 |         success: false
31 |       };
32 |     });
33 | };
34 | 
35 | export const getGistById = id => apiFetch(`/api/gists/${id}`);
36 | 
37 | export const uploadStylesheets = async ({
38 |   stylesheets,
39 |   url,
40 |   visibility = "public"
41 | }) => {
42 |   return apiFetch("/api/stylesheet_groups", {
43 |     method: "POST",
44 |     body: JSON.stringify({
45 |       url,
46 |       stylesheets,
47 |       visibility
48 |     })
49 |   });
50 | };
51 | 
52 | export const sendFeedback = async ({ message, from }) => {
53 |   return apiFetch("/api/feedback", {
54 |     method: "POST",
55 |     body: JSON.stringify({
56 |       message,
57 |       version: chrome.runtime.getManifest().version,
58 |       from
59 |     })
60 |   });
61 | };
62 | 
63 | export const processScreenshot = ({
64 |   key: stylesheet_key,
65 |   domain: stylesheet_domain
66 | }) => ({ publicUrl: url }) => {
67 |   return apiFetch("/api/photos/process", {
68 |     method: "POST",
69 |     body: JSON.stringify({
70 |       url,
71 |       stylesheet_key,
72 |       stylesheet_domain,
73 |       content_type: SCREENSHOT_CONTENT_TYPE
74 |     })
75 |   }).then(() => {
76 |     delete uploaders[stylesheet_key];
77 |   });
78 | };
79 | 
80 | export const uploadScreenshot = ({ key, domain, photo }) => {
81 |   uploaders[key] = new S3Upload({
82 |     files: [photo],
83 |     signingUrl: "/api/photos/presign",
84 |     onFinishS3Put: processScreenshot({ key, domain }),
85 |     onError: error => {
86 |       console.error(error);
87 |       delete uploaders[key];
88 |     },
89 |     server: __API_HOST__,
90 |     uploadRequestHeaders: {}
91 |   });
92 | };
93 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/browserAction.js:
--------------------------------------------------------------------------------
 1 | const PLUS_IMAGE_PATH = {
 2 |   "16": "img/plus_16x16.png",
 3 |   "19": "img/plus_19x19.png",
 4 |   "38": "img/plus_38x38.png",
 5 |   "48": "img/plus_48x48.png",
 6 |   "128": "img/plus_128x128.png"
 7 | };
 8 | 
 9 | export const DEFAULT_ICON_PATH = {
10 |   "16": "img/default_16x16.png",
11 |   "19": "img/default_19x19.png",
12 |   "38": "img/default_38x38.png",
13 |   "48": "img/default_48x48.png",
14 |   "128": "img/default_128x128.png"
15 | };
16 | 
17 | export const BROWSER_ACTION_STATES = {
18 |   default: "default",
19 |   style_applied: "style_applied",
20 |   upload_style: "upload_style"
21 | };
22 | 
23 | let BROWSER_ACTION_STATE = BROWSER_ACTION_STATES.default;
24 | 
25 | export const setBrowserActionToDefault = ({ tabId }) => {
26 |   try {
27 |     chrome.browserAction.setIcon({
28 |       tabId,
29 |       path: DEFAULT_ICON_PATH
30 |     });
31 |     chrome.browserAction.setTitle({
32 |       tabId,
33 |       title: "StyleURL"
34 |     });
35 | 
36 |     BROWSER_ACTION_STATE = BROWSER_ACTION_STATES.default;
37 |   } catch (exception) {
38 |     console.error(exception);
39 |   }
40 | };
41 | 
42 | export const setBrowserActionToStyleApplied = ({ styleCount, tabId }) => {
43 |   try {
44 |     chrome.browserAction.setIcon({
45 |       tabId,
46 |       path: DEFAULT_ICON_PATH
47 |     });
48 | 
49 |     chrome.browserAction.setBadgeText({
50 |       text: `${styleCount}`,
51 |       tabId: tabId
52 |     });
53 | 
54 |     BROWSER_ACTION_STATE = BROWSER_ACTION_STATES.style_applied;
55 |   } catch (exception) {
56 |     console.error(exception);
57 |   }
58 | };
59 | 
60 | export const getBrowserActionState = () => BROWSER_ACTION_STATE;
61 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/gists.js:
--------------------------------------------------------------------------------
 1 | import _ from "lodash";
 2 | import { loadStylefileFromString } from "./stylefile";
 3 | 
 4 | export const STYLEFILE_NAMES = ["Stylefile.yml", "Stylefile"];
 5 | export const SPECIAL_QUERY_PARAMS = {
 6 |   gist_id: "__styleurl"
 7 | };
 8 | 
 9 | export { getGistById } from "./api";
10 | 
11 | export const getGistIDFromURL = url => {
12 |   const queryString = _.last(url.split("?"));
13 | 
14 |   if (!queryString) {
15 |     return null;
16 |   }
17 | 
18 |   const params = new URLSearchParams(queryString);
19 |   const param = params.get(SPECIAL_QUERY_PARAMS.gist_id);
20 | 
21 |   if (!param) {
22 |     return null;
23 |   }
24 | 
25 |   return _.last(param.split("gist_"));
26 | };
27 | 
28 | export const getStylesheetsFromGist = gist => {
29 |   return _
30 |     .keys(gist.files || [])
31 |     .filter(fileName => {
32 |       const file = gist.files[fileName];
33 | 
34 |       return file.type === "text/css";
35 |     })
36 |     .map(filename => [filename, gist.files[filename].content]);
37 | };
38 | 
39 | export const loadStylefileFromGist = gist => {
40 |   const filename = _.keys(gist.files || []).find(fileName => {
41 |     return STYLEFILE_NAMES.includes(fileName);
42 |   });
43 | 
44 |   if (!filename) {
45 |     return null;
46 |   }
47 | 
48 |   return loadStylefileFromString(gist.files[filename].content);
49 | };
50 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/injectScriptNames.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   inject_create_styleurl: "__styleurl_create_styleurl_shadowdom",
3 |   inject_view_styleurl: "__styleurl_view_styleurl_shadowdom"
4 | };
5 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/injectShadowDom.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import ShadowDOM from "react-shadow";
 4 | 
 5 | const Z_INDEX = 2147483647;
 6 | 
 7 | export const injectShadowDOM = ({
 8 |   id,
 9 |   Component,
10 |   include,
11 |   position = "bottom"
12 | }) => {
13 |   if (!!document.querySelector(id)) {
14 |     return;
15 |   }
16 | 
17 |   // Sorry Intercom!
18 |   if (document.querySelector("#intercom-container")) {
19 |     document.querySelector("#intercom-container").style.display = "none";
20 |   }
21 | 
22 |   const disableIntercomForcefully = document.createElement("style");
23 |   disableIntercomForcefully.id =
24 |     "__styleurl-disable-intercom-while-styleurl-bar-in-page-sorry-intercom";
25 |   disableIntercomForcefully.innerHTML =
26 |     "#intercom-container { display: none !important; opacity: 0 !important; pointer-events: none !important; }";
27 |   document.body.appendChild(disableIntercomForcefully);
28 | 
29 |   const hideFOUC = document.createElement("style");
30 | 
31 |   hideFOUC.id = "__styleurl--handle-loading-fouc";
32 | 
33 |   hideFOUC.innerHTML = `
34 | #${id} > div {
35 |   display: none;
36 | }
37 | 
38 | #${id} > div.resolved {
39 |   display: block;
40 | }
41 |   `;
42 |   document.body.appendChild(hideFOUC);
43 | 
44 |   const shadowContainer = document.createElement("div");
45 |   shadowContainer.id = id;
46 |   shadowContainer.style.width = "100%";
47 |   shadowContainer.style.position = "fixed";
48 |   shadowContainer.style.left = 0;
49 |   shadowContainer.style.right = 0;
50 |   shadowContainer.style.display = "block";
51 |   shadowContainer.style.zIndex = Z_INDEX; // https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index
52 |   shadowContainer.style.boxSizing = "border-box";
53 | 
54 |   if (position === "bottom") {
55 |     shadowContainer.style.bottom = 0;
56 |   } else if (position === "top") {
57 |     shadowContainer.style.top = 0;
58 |   }
59 | 
60 |   document.body.appendChild(shadowContainer);
61 | 
62 |   ReactDOM.render(
63 |     <ShadowDOM include={[include]}>
64 |       <div className="ignore-react-onclickoutside">
65 |         <div className="StyleURLShadowDOMRoot">
66 |           <Component />
67 |         </div>
68 |       </div>
69 |     </ShadowDOM>,
70 |     shadowContainer
71 |   );
72 | 
73 |   const spacerDiv = document.createElement("div");
74 |   spacerDiv.style.width = "1px";
75 |   spacerDiv.style.height = "50px";
76 |   spacerDiv.style.content = "''";
77 |   spacerDiv.style.display = "block";
78 | 
79 |   spacerDiv.id = "__styleurl-spacer";
80 | 
81 |   document.body.appendChild(spacerDiv);
82 | };
83 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/makeEverythingImportant.js:
--------------------------------------------------------------------------------
 1 | const getStylesheet = element => {
 2 |   for (let i = 0; i < document.styleSheets.length; i++) {
 3 |     const stylesheet = document.styleSheets[i];
 4 | 
 5 |     if (stylesheet.ownerNode === element) {
 6 |       return stylesheet;
 7 |     }
 8 |   }
 9 | 
10 |   return null;
11 | };
12 | 
13 | export const makeAllRulesImportant = styleElement => {
14 |   if (!styleElement) {
15 |     return;
16 |   }
17 | 
18 |   const stylesheet = getStylesheet(styleElement);
19 | 
20 |   for (let i = 0; i < stylesheet.rules.length; i++) {
21 |     const rule = stylesheet.rules[i];
22 | 
23 |     if (!rule.style) {
24 |       continue;
25 |     }
26 | 
27 |     for (let k = 0; k < rule.style.length; k++) {
28 |       const declarationName = rule.style[k];
29 |       const value = rule.style.getPropertyValue(declarationName);
30 | 
31 |       // A lot of shorthand properties mark everything as initial, e.g. "background"
32 |       // We don't wanna actually set those to !important
33 |       if (value !== "initial") {
34 |         rule.style.setProperty(declarationName, value, "important");
35 |       }
36 |     }
37 |   }
38 | };
39 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/port.js:
--------------------------------------------------------------------------------
 1 | import _ from "lodash";
 2 | const DEV_CHROME_PORT_PREFIX = "STYLEURL_DEV_PORT/";
 3 | const PROD_CHROME_PORT_PREFIX = "STYLEURL_PORT/";
 4 | 
 5 | const CHROME_PORT_PREFIX =
 6 |   process.env.NODE_ENV === "PRODUCTION"
 7 |     ? PROD_CHROME_PORT_PREFIX
 8 |     : DEV_CHROME_PORT_PREFIX;
 9 | 
10 | export const tabIdFromPortName = _portName => {
11 |   return parseInt(_.last(_portName.split("tab/")), 10);
12 | };
13 | 
14 | export const PORT_TYPES = {
15 |   github_gist: "github_gist",
16 |   inline_header: "inline_header",
17 |   devtool_widget: "devtool_widget",
18 |   stylesheet_manager: "stylesheet_manager",
19 |   inline_style_observer: "inline_style_observer"
20 | };
21 | 
22 | export const MESSAGE_TYPES = {
23 |   get_styles_diff: "get_styles_diff",
24 |   get_gist_content: "get_gist_content",
25 |   apply_stylesheets: "apply_stylesheets",
26 |   style_diff_changed: "style_diff_changed",
27 |   send_content_stylesheets: "send_stylesheets",
28 |   log: "log",
29 |   create_style_url: "create_style_url",
30 |   send_success_notification: "send_success_notification",
31 |   toggle_styleurl_css: "toggle_styleurl_css",
32 |   get_styleurl: "get_styleurl",
33 |   update_styleurl_state: "update_styleurl_state",
34 |   shared_styleurl: "shared_styleurl",
35 |   get_current_styles_diff: "get_current_styles_diff",
36 |   upload_stylesheets: "upload_stylesheets",
37 |   start_observing_inline_styles: "start_observing_inline_styles",
38 |   stop_observing_inline_styles: "start_observing_inline_styles",
39 |   geT_inline_style_diff: "get_all_inline_styles",
40 |   open_style_editor: "open_style_editor",
41 |   open_devtools_plz: "open_devtools_plz",
42 |   send_feedback: "send_feedback"
43 | };
44 | 
45 | export const STYLESHEET_TYPE = {
46 |   inspector: "inspector",
47 |   remote: "remote",
48 |   style_tag: "style_tag"
49 | };
50 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/stylefile.js:
--------------------------------------------------------------------------------
 1 | import URLPattern from "url-pattern";
 2 | import YAML from "js-yaml";
 3 | import _ from "lodash";
 4 | 
 5 | export const loadStylefileFromString = string => {
 6 |   return YAML.safeLoad(string);
 7 | };
 8 | 
 9 | export const shouldApplyStyleToURL = (stylefile, url) => {
10 |   const matchableURL = _.last(url.split("://"));
11 |   const patterns = stylefile.url_patterns.map(
12 |     pattern => new URLPattern(pattern)
13 |   );
14 | 
15 |   return !!patterns.find(pattern => pattern.match(matchableURL));
16 | };
17 | 


--------------------------------------------------------------------------------
/chrome/extension/lib/toFile.js:
--------------------------------------------------------------------------------
 1 | const toBlob = base64String => {
 2 |   return window.fetch(base64String).then(res => res.blob());
 3 | };
 4 | 
 5 | export const toFile = async (base64String, type) => {
 6 |   const blob = await toBlob(base64String);
 7 | 
 8 |   Object.defineProperty(blob, "name", {
 9 |     get: function() {
10 |       return "photo.png";
11 |     }
12 |   });
13 | 
14 |   Object.defineProperty(blob, "type", {
15 |     get: function() {
16 |       return type;
17 |     }
18 |   });
19 | 
20 |   return blob;
21 | };
22 | 


--------------------------------------------------------------------------------
/chrome/extension/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     "postcss-import": {},
4 |     "postcss-cssnext": {}
5 |   }
6 | };
7 | 


--------------------------------------------------------------------------------
/chrome/extension/stylesheet_manager_content_script.js:
--------------------------------------------------------------------------------
  1 | // This file is loosely based on https://github.com/openstyles/stylus/blob/master/content/apply.js
  2 | // Though, heavily refactored to use a more OO approach than imperative
  3 | import Messenger from "chrome-ext-messenger";
  4 | import { PORT_TYPES } from "./lib/port";
  5 | 
  6 | const messenger = new Messenger();
  7 | 
  8 | const ID_PREFIX = "__styleurl";
  9 | const ROOT = document.documentElement;
 10 | 
 11 | class DocumentRootObserver {
 12 |   ORDERED_TAGS = ["head", "body", "frameset", "style", "link"];
 13 | 
 14 |   constructor({rootEl}) {
 15 |     this.lastRestorationTime = 0;
 16 |     this.restoractionCounter = 0;
 17 |     this.observing = false;
 18 |     this.sorting = false;
 19 |     this.rootEl = rootEl;
 20 | 
 21 |     this.observer = new MutationObserver(this.sortStyleElements);
 22 |     setTimeout(this.sortStyleElements);
 23 |   }
 24 | 
 25 |   start = ({ sort = false } = {}) => {
 26 |     if (sort && this.sortStyleMap()) {
 27 |       this.sortStyleElements();
 28 |     }
 29 | 
 30 |     if (!this.observing && this.rootEl && this.observer) {
 31 |       this.observer.observe(this.rootEl, { childList: true });
 32 |       this.observing = true;
 33 |     }
 34 |   }
 35 | 
 36 |   function stop() {
 37 |     if (observing) {
 38 |       observer.takeRecords();
 39 |       observer.disconnect();
 40 |       observing = false;
 41 |     }
 42 |   }
 43 |   function evade(fn) {
 44 |     const wasObserving = observing;
 45 |     if (observing) {
 46 |       stop();
 47 |     }
 48 |     fn();
 49 |     if (wasObserving) {
 50 |       start();
 51 |     }
 52 |   }
 53 |   function sortStyleMap() {
 54 |     const list = [];
 55 |     let prevStyleId = 0;
 56 |     let needsSorting = false;
 57 |     for (const entry of styleElements.entries()) {
 58 |       list.push(entry);
 59 |       const el = entry[1];
 60 |       const styleId = getStyleId(el);
 61 |       el.styleId = styleId;
 62 |       needsSorting |= styleId < prevStyleId;
 63 |       prevStyleId = styleId;
 64 |     }
 65 |     if (needsSorting) {
 66 |       styleElements = new Map(
 67 |         list.sort((a, b) => a[1].styleId - b[1].styleId)
 68 |       );
 69 |       return true;
 70 |     }
 71 |   }
 72 |   function sortStyleElements() {
 73 |     if (!observing) {
 74 |       return;
 75 |     }
 76 |     let prevExpected = document.documentElement.lastElementChild;
 77 |     while (prevExpected && isSkippable(prevExpected, true)) {
 78 |       prevExpected = prevExpected.previousElementSibling;
 79 |     }
 80 |     if (!prevExpected) {
 81 |       return;
 82 |     }
 83 |     for (const el of styleElements.values()) {
 84 |       if (!isMovable(el)) {
 85 |         continue;
 86 |       }
 87 |       while (true) {
 88 |         const next = prevExpected.nextElementSibling;
 89 |         if (next && isSkippable(next)) {
 90 |           prevExpected = next;
 91 |         } else if (
 92 |           next === el ||
 93 |           (next === el.previousElementSibling && next) ||
 94 |           moveAfter(el, next || prevExpected)
 95 |         ) {
 96 |           prevExpected = el;
 97 |           break;
 98 |         } else {
 99 |           return;
100 |         }
101 |       }
102 |     }
103 |     if (sorting) {
104 |       sorting = false;
105 |       if (observer) observer.takeRecords();
106 |       if (!restorationLimitExceeded()) {
107 |         start();
108 |       } else {
109 |         setTimeout(start, 1000);
110 |       }
111 |     }
112 |   }
113 |   function isMovable(el) {
114 |     return el.parentNode || !disabledElements.has(getStyleId(el));
115 |   }
116 |   function isSkippable(el, skipOwnStyles) {
117 |     return (
118 |       !ORDERED_TAGS.includes(el.localName) ||
119 |       (el.id.startsWith(ID_PREFIX) &&
120 |         (skipOwnStyles || el.id.endsWith("-ghost")) &&
121 |         el.localName === "style" &&
122 |         el.className === "stylus")
123 |     );
124 |   }
125 |   function moveAfter(el, expected) {
126 |     if (!sorting) {
127 |       sorting = true;
128 |       stop();
129 |     }
130 |     expected.insertAdjacentElement("afterend", el);
131 |     if (el.disabled !== disableAll) {
132 |       // moving an element resets its 'disabled' state
133 |       el.disabled = disableAll;
134 |     }
135 |     return true;
136 |   }
137 |   function restorationLimitExceeded() {
138 |     const t = performance.now();
139 |     if (t - lastRestorationTime > 1000) {
140 |       restorationCounter = 0;
141 |     }
142 |     lastRestorationTime = t;
143 |     return ++restorationCounter > 5;
144 |   }
145 | }
146 | 
147 | class StylesheetManager {
148 |   constructor() {
149 |     this.disableAllStyles = false;
150 |     this.exposeIframes = false;
151 |     this.docRewriteObserver = null;
152 |     this.docRootObserver = null;
153 |     this.styleElements = new Map();
154 |     this.disabledElements = new Map();
155 |     this.retiredStyleTimers = new Map();
156 | 
157 |     this.connection = messenger.initConnection(
158 |       PORT_TYPES.stylesheet_manager,
159 |       this.handleMessage
160 |     );
161 |   }
162 | 
163 |   handleMessage = () => {};
164 | 
165 |   get matchURL() {
166 |     const matchURL = location.href;
167 |     if (matchURL.match(/^(http|file|chrome|ftp)/)) {
168 |       // dynamic about: and javascript: iframes don't have an URL yet
169 |       // so we'll try the parent frame which is guaranteed to have a real URL
170 |       try {
171 |         if (window !== parent) {
172 |           return parent.location.href;
173 |         }
174 |       } catch (e) {}
175 |     }
176 | 
177 |     return matchURL;
178 |   }
179 | 
180 |   get styleTagQuery() {
181 |     return `style.styleurl[id^="${ID_PREFIX}"]`;
182 |   }
183 | 
184 |   getStyles = () => {};
185 | 
186 |   setDisableAllStyles = shouldDisableAll => {
187 |     if (!this.disableAllStyles === !shouldDisableAll) {
188 |       return;
189 |     }
190 | 
191 |     this.disableAllStyles = shouldDisableAll;
192 | 
193 |     Array.prototype.forEach.call(document.styleSheets, stylesheet => {
194 |       if (
195 |         stylesheet.ownerNode.matches(this.styleTagQuery) &&
196 |         stylesheet.disabled !== shouldDisableAll
197 |       ) {
198 |         stylesheet.disabled = shouldDisableAll;
199 |       }
200 |     });
201 |   };
202 | 
203 |   removeStyle = ({ id, expire = false }) => {
204 |     const el = document.getElementById(ID_PREFIX + id);
205 |     if (el && retire) {
206 |       // to avoid page flicker when the style is updated
207 |       // instead of removing it immediately we rename its ID and queue it
208 |       // to be deleted in applyStyles after a new version is fetched and applied
209 |       const expiredID = id + "-expired";
210 |       el.id = ID_PREFIX + deadID;
211 |       // in case something went wrong and new style was never applied
212 |       retiredStyleTimers.set(
213 |         expiredID,
214 |         window.setTimeout(() => this.removeStyle({ id: expiredID }), 1000)
215 |       );
216 |     } else if (el) {
217 |       docRootObserver.evade(() => el.remove());
218 |     }
219 | 
220 |     this.styleElements.delete(ID_PREFIX + id);
221 |     this.disabledElements.delete(id);
222 |     this.retiredStyleTimers.delete(id);
223 |   };
224 | 
225 |   updateStylesheets = styles => {
226 |     if (!document.documentElement) {
227 |       new MutationObserver((mutations, observer) => {
228 |         if (document.documentElement) {
229 |           observer.disconnect();
230 |           applyStyles(styles);
231 |         }
232 |       }).observe(document, { childList: true });
233 |       return;
234 |     }
235 | 
236 |     if ("disableAll" in styles) {
237 |       doDisableAll(styles.disableAll);
238 |     }
239 | 
240 |     const gotNewStyles = styles.length;
241 |     if (gotNewStyles) {
242 |       if (docRootObserver) {
243 |         docRootObserver.stop();
244 |       } else {
245 |         initDocRootObserver();
246 |       }
247 |     }
248 | 
249 |     if (styles.needTransitionPatch) {
250 |       applyTransitionPatch();
251 |     }
252 | 
253 |     if (gotNewStyles) {
254 |       for (const id in styles) {
255 |         const sections = styles[id];
256 |         if (!Array.isArray(sections)) continue;
257 |         applySections(id, sections.map(({ code }) => code).join("\n"));
258 |       }
259 |       docRootObserver.start({ sort: true });
260 |     }
261 | 
262 |     if (!isOwnPage && !docRewriteObserver && styleElements.size) {
263 |       initDocRewriteObserver();
264 |     }
265 | 
266 |     if (retiredStyleTimers.size) {
267 |       setTimeout(() => {
268 |         for (const [id, timer] of retiredStyleTimers.entries()) {
269 |           removeStyle({ id });
270 |           clearTimeout(timer);
271 |         }
272 |       });
273 |     }
274 |   };
275 | }
276 | 


--------------------------------------------------------------------------------
/chrome/extension/version_info.js:
--------------------------------------------------------------------------------
 1 | const writeVersionToDOM = () => {
 2 |   const metadata = {
 3 |     id: chrome.runtime.id,
 4 |     environment: process.env.NODE_ENV,
 5 |     version: chrome.runtime.getManifest().version
 6 |   };
 7 | 
 8 |   const scriptTag = document.createElement("script");
 9 |   scriptTag.id = `__styleurl-extension`;
10 |   scriptTag.type = "application/json";
11 | 
12 |   scriptTag.innerHTML = JSON.stringify(metadata);
13 | 
14 |   document.documentElement.appendChild(scriptTag);
15 |   console.log("Wrie Version");
16 | };
17 | 
18 | if (document.body) {
19 |   writeVersionToDOM();
20 | } else {
21 |   window.addEventListener("DOMContentLoaded", writeVersionToDOM);
22 | }
23 | 


--------------------------------------------------------------------------------
/chrome/extension/view_styleurl/ViewStyleURL.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Messenger from "chrome-ext-messenger";
  3 | import "../create_styleurl.css";
  4 | import { HeaderBar } from "app/components/HeaderBar";
  5 | import { PORT_TYPES, MESSAGE_TYPES } from "../lib/port";
  6 | import { Switcher } from "../../app/components/Switcher";
  7 | import Dropdown from "../../app/components/Dropdown";
  8 | import { Icon } from "../../app/components/Icon";
  9 | import { StylesheetCodePreview } from "../../app/components/StylesheetCodePreview";
 10 | import { CopyToClipboard } from "react-copy-to-clipboard";
 11 | import injectScriptNames from "../lib/injectScriptNames";
 12 | const messenger = new Messenger();
 13 | 
 14 | const buildShareURL = ({ domain, id }) => {
 15 |   return `${__FRONTEND_HOST__}/${domain}/${id}`;
 16 | };
 17 | 
 18 | const buildForkURL = ({ gistId }) => {
 19 |   return `${__API_HOST__}/api/fork?gist_id=${encodeURIComponent(gistId)}`;
 20 | };
 21 | 
 22 | class ViewStyleURL extends React.PureComponent {
 23 |   handleOpenFork = () => {
 24 |     const { gistId } = this.props;
 25 | 
 26 |     window.open(buildForkURL({ gistId }), "_blank");
 27 |   };
 28 | 
 29 |   render() {
 30 |     const {
 31 |       toggleApplyStyle,
 32 |       toggleIsBarEnabled,
 33 |       isStyleEnabled,
 34 |       isBarEnabled,
 35 |       gistId,
 36 |       hidden,
 37 |       onHide,
 38 |       stylesheets,
 39 |       onSendFeedback,
 40 |       onClickShare,
 41 |       shareURL
 42 |     } = this.props;
 43 | 
 44 |     return (
 45 |       <HeaderBar
 46 |         className="HeaderBar--ViewStyleURL"
 47 |         hidden={!isBarEnabled || hidden}
 48 |         onHide={onHide}
 49 |         onSendFeedback={onSendFeedback}
 50 |         center={
 51 |           <Switcher
 52 |             onLabel="New changes"
 53 |             offLabel="Original"
 54 |             on={isStyleEnabled}
 55 |             onChange={toggleApplyStyle}
 56 |           />
 57 |         }
 58 |       >
 59 |         <Dropdown
 60 |           icon={<Icon width={"32"} height="15" name="code" />}
 61 |           title="Code"
 62 |         >
 63 |           <StylesheetCodePreview gistId={gistId} stylesheets={stylesheets} />
 64 |         </Dropdown>
 65 |         <CopyToClipboard text={shareURL} onCopy={onClickShare}>
 66 |           <Dropdown
 67 |             icon={<Icon width={"24"} height="15" name="share" />}
 68 |             title="Share"
 69 |           />
 70 |         </CopyToClipboard>
 71 |       </HeaderBar>
 72 |     );
 73 |   }
 74 | }
 75 | 
 76 | class ViewStyleURLContainer extends React.Component {
 77 |   constructor(props) {
 78 |     super(props);
 79 | 
 80 |     this._connection = messenger.initConnection(
 81 |       PORT_TYPES.inline_header,
 82 |       this.handleMessage
 83 |     );
 84 | 
 85 |     this.state = {
 86 |       styleurl: null,
 87 |       isBarEnabled: false,
 88 |       hidden: false,
 89 |       isStyleEnabled: false
 90 |     };
 91 |   }
 92 | 
 93 |   handleHide = () => {
 94 |     this.setState({ hidden: true });
 95 |     const shadowRoot = document.querySelector(
 96 |       `#${injectScriptNames.inject_view_styleurl}`
 97 |     );
 98 |     shadowRoot.style.display = "none";
 99 |   };
100 | 
101 |   componentDidMount() {
102 |     this._sendMessage(MESSAGE_TYPES.get_styleurl).then(({ value }) =>
103 |       this.updateStyleURL(value)
104 |     );
105 |   }
106 | 
107 |   updateStyleURL = styleurl =>
108 |     this.setState({
109 |       styleurl,
110 |       isBarEnabled: styleurl.isBarEnabled,
111 |       isStyleEnabled: styleurl.isStyleEnabled
112 |     });
113 | 
114 |   _sendMessage = (kind, message) => {
115 |     return this._connection.sendMessage(
116 |       `background:${PORT_TYPES.inline_header}`,
117 |       {
118 |         kind,
119 |         value: message
120 |       }
121 |     );
122 |   };
123 | 
124 |   handleClickShare = () => {
125 |     this._sendMessage(MESSAGE_TYPES.shared_styleurl);
126 |   };
127 | 
128 |   toggleBarEnabled = () => {
129 |     this._sendMessage(MESSAGE_TYPES.update_styleurl_state, {
130 |       ...this.state.styleurl,
131 |       isBarEnabled: !this.state.isBarEnabled
132 |     });
133 |   };
134 |   handleSendFeedback = message => {
135 |     return this._sendMessage(MESSAGE_TYPES.send_feedback, {
136 |       message,
137 |       from: "view"
138 |     });
139 |   };
140 | 
141 |   toggleApplyStyle = () => {
142 |     this._sendMessage(MESSAGE_TYPES.update_styleurl_state, {
143 |       ...this.state.styleurl,
144 |       isStyleEnabled: !this.state.isStyleEnabled
145 |     });
146 |   };
147 | 
148 |   handleMessage = (request, from, sender, sendResponse) => {
149 |     const { kind, value } = request;
150 | 
151 |     if (
152 |       kind === MESSAGE_TYPES.get_styleurl ||
153 |       kind === MESSAGE_TYPES.update_styleurl_state
154 |     ) {
155 |       this.updateStyleURL(value);
156 |     }
157 |   };
158 | 
159 |   componentWillUnmount() {
160 |     if (this._connection) {
161 |       this._connection.disconnect();
162 |     }
163 |   }
164 | 
165 |   render() {
166 |     const { isStyleEnabled, isBarEnabled, hidden } = this.state;
167 |     console.log(this.state.styleurl);
168 | 
169 |     return (
170 |       <ViewStyleURL
171 |         isStyleEnabled={isStyleEnabled}
172 |         isBarEnabled={isBarEnabled}
173 |         stylesheets={this.state.styleurl ? this.state.styleurl.stylesheets : []}
174 |         gistId={this.state.styleurl ? this.state.styleurl.gistId : null}
175 |         toggleApplyStyle={this.toggleApplyStyle}
176 |         onClickShare={this.handleClickShare}
177 |         onSendFeedback={this.handleSendFeedback}
178 |         hidden={hidden}
179 |         onHide={this.handleHide}
180 |         shareURL={
181 |           this.state.styleurl &&
182 |           buildShareURL({
183 |             domain: this.state.styleurl.stylefile.domains[0],
184 |             id: this.state.styleurl.gistId
185 |           })
186 |         }
187 |       />
188 |     );
189 |   }
190 | }
191 | 
192 | export default ViewStyleURLContainer;
193 | 


--------------------------------------------------------------------------------
/chrome/manifest.dev.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "1.0.0",
 3 |   "name": "StyleURL (Development)",
 4 |   "manifest_version": 2,
 5 |   "description":
 6 |     "Publish CSS changes you made in Chrome Inspector to other people",
 7 |   "browser_action": {},
 8 |   "devtools_page": "devtools.html",
 9 |   "icons": {
10 |     "16": "img/default_16x16.png",
11 |     "48": "img/default_48x48.png",
12 |     "128": "img/default_128x128.png"
13 |   },
14 |   "web_accessible_resources": [
15 |     "create_styleurl.html",
16 |     "inject.html",
17 |     "*.js",
18 |     "*.css",
19 |     "img/*.png"
20 |   ],
21 |   "background": {
22 |     "page": "background.html"
23 |   },
24 |   "content_scripts": [
25 |     {
26 |       "matches": ["https://gist.github.com/*/*"],
27 |       "js": ["github_gist_content_script.bundle.js"],
28 |       "run_at": "document_end"
29 |     },
30 |     {
31 |       "matches": [
32 |         "http://localhost:3000/*",
33 |         "http://localhost:3001/*",
34 |         "http://localhost:3002/*",
35 |         "https://api.styleurl.app/*",
36 |         "https://styleurl.app/*",
37 |         "https://www.styleurl.app/*",
38 |         "https://styleurl.app/*"
39 |       ],
40 |       "js": ["version_info.bundle.js"],
41 |       "run_at": "document_start"
42 |     },
43 |     {
44 |       "matches": ["<all_urls>"],
45 |       "js": ["inline_style_observer.bundle.js"],
46 |       "run_at": "document_start"
47 |     }
48 |   ],
49 |   "permissions": [
50 |     "tabs",
51 |     "<all_urls>",
52 |     "webNavigation",
53 |     "storage",
54 |     "clipboardWrite",
55 |     "notifications"
56 |   ],
57 |   "content_security_policy":
58 |     "default-src 'self'; script-src 'self' https://gist.github.com http://localhost:3000 https://localhost:3000 'unsafe-eval'; connect-src https://sentry.io https://gist.github.com https://gist.githubusercontent.com http://localhost:3000 https://s3-us-west-2.amazonaws.com https://api.github.com data: https://styleurlapp.s3-us-west-2.amazonaws.com https://styleurlapp.s3.us-west-2.amazonaws.com http://localhost:3001 http://localhost:3002 https://localhost:3000; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:; font-src 'self' data: http://localhost:3000;"
59 | }
60 | 


--------------------------------------------------------------------------------
/chrome/manifest.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "1.1.15",
 3 |   "name": "StyleURL",
 4 |   "manifest_version": 2,
 5 |   "description": "StyleURL lets you export and share CSS tweaks instantly.",
 6 |   "browser_action": {},
 7 |   "devtools_page": "devtools.html",
 8 |   "icons": {
 9 |     "16": "img/default_16x16.png",
10 |     "48": "img/default_48x48.png",
11 |     "128": "img/default_128x128.png"
12 |   },
13 |   "background": {
14 |     "page": "background.html"
15 |   },
16 |   "web_accessible_resources": [
17 |     "create_styleurl.html",
18 |     "inject.html",
19 |     "*.js",
20 |     "*.css",
21 |     "img/*.png"
22 |   ],
23 |   "content_scripts": [
24 |     {
25 |       "matches": ["https://gist.github.com/*/*"],
26 |       "js": ["github_gist_content_script.bundle.js"],
27 |       "run_at": "document_end"
28 |     },
29 |     {
30 |       "matches": [
31 |         "https://api.styleurl.app/*",
32 |         "https://styleurl.app/*",
33 |         "https://www.styleurl.app/*"
34 |       ],
35 |       "js": ["version_info.bundle.js"],
36 |       "run_at": "document_start"
37 |     },
38 |     {
39 |       "matches": ["<all_urls>"],
40 |       "js": ["inline_style_observer.bundle.js"],
41 |       "run_at": "document_start"
42 |     }
43 |   ],
44 |   "permissions": [
45 |     "tabs",
46 |     "<all_urls>",
47 |     "webNavigation",
48 |     "storage",
49 |     "clipboardWrite",
50 |     "notifications"
51 |   ],
52 |   "content_security_policy":
53 |     "default-src 'self'; script-src 'self' https://gist.github.com 'unsafe-eval'; connect-src https://sentry.io https://gist.github.com https://gist.githubusercontent.com https://s3-us-west-2.amazonaws.com https://api.github.com data: https://styleurlapp.s3-us-west-2.amazonaws.com https://styleurlapp.s3.us-west-2.amazonaws.com https://api.styleurl.app https://www.styleurl.app https://styleurl.app; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:; font-src 'self' data:;"
54 | }
55 | 


--------------------------------------------------------------------------------
/chrome/views/background.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | 
3 | html
4 |   head
5 |     script(src=env == 'prod' ? '/background.bundle.js' : 'https://localhost:3000/background.bundle.js')
6 | 


--------------------------------------------------------------------------------
/chrome/views/create_styleurl.pug:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | 
 3 | html
 4 |   head
 5 |     meta(charset='UTF-8')
 6 |     title "Create StyleURL"
 7 |     link(id="root_stylesheet" rel="stylesheet" href='/create_styleurl.css')
 8 | 
 9 |   body
10 |     #root
11 |     script(src='/create_styleurl.bundle.js')
12 | 


--------------------------------------------------------------------------------
/chrome/views/devtools.pug:
--------------------------------------------------------------------------------
1 | doctype html
2 | 
3 | html
4 |   head
5 |     script(src=env == 'prod' ? '/devtools.bundle.js' : 'http://localhost:3000/devtools.bundle.js')
6 | 


--------------------------------------------------------------------------------
/chrome/views/inject.pug:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | 
 3 | html
 4 |   head
 5 |     meta(charset='UTF-8')
 6 |     title Redux TodoMVC Example (Inject)
 7 |     style.
 8 |       html, body {
 9 |         background-color: rgba(0,0,0,0)
10 |       }
11 |   body
12 |     #root
13 |     script(src=env == 'prod' ? '/todoapp.bundle.js' : 'https://localhost:3000/todoapp.bundle.js')
14 | 


--------------------------------------------------------------------------------
/chrome/views/window.pug:
--------------------------------------------------------------------------------
 1 | doctype html
 2 | 
 3 | html
 4 |   head
 5 |     meta(charset='UTF-8')
 6 |     title Redux TodoMVC Example (Window)
 7 |   body
 8 |     #root
 9 |     if env !== 'prod'
10 |       script(src='chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/redux-devtools-extension.js')
11 |     script(src=env == 'prod' ? '/todoapp.bundle.js' : 'http://localhost:3000/todoapp.bundle.js')
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "styleurl-extension",
  3 |   "version": "1.1.15",
  4 |   "description": "StyleURL Chrome extension",
  5 |   "private": true,
  6 |   "scripts": {
  7 |     "dev": "node scripts/dev",
  8 |     "build": "node scripts/build",
  9 |     "compress": "node scripts/compress",
 10 |     "update-readme": "node scripts/update-readme",
 11 |     "compress-keygen": "crx keygen",
 12 |     "clean": "rimraf build/ dev/ *.zip *.crx",
 13 |     "lint": "eslint app chrome test scripts webpack/*.js",
 14 |     "test-e2e": "cross-env NODE_ENV=test mocha -r ./test/setup-app test/e2e",
 15 |     "test": "cross-env NODE_ENV=test mocha -r ./test/setup-app test/app",
 16 |     "release": "yarn && yarn build && yarn compress --release && yarn update-readme"
 17 |   },
 18 |   "repository": {
 19 |     "type": "git",
 20 |     "url": "https://github.com/jarred-sumner/styleurl-extension"
 21 |   },
 22 |   "keywords": [
 23 |     "chrome",
 24 |     "extension",
 25 |     "react",
 26 |     "redux",
 27 |     "hot reload",
 28 |     "webpack",
 29 |     "boilerplate"
 30 |   ],
 31 |   "author": "Jarred Sumner <jarred@jarredsumner.com>",
 32 |   "license": "AGPL",
 33 |   "devDependencies": {
 34 |     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.53",
 35 |     "babel-loader": "^8.0.0-beta",
 36 |     "babel-plugin-lodash": "^3.3.4",
 37 |     "babel-plugin-module-resolver": "^3.1.1",
 38 |     "babel-plugin-transform-remove-console": "^6.9.4",
 39 |     "chai": "^3.2.0",
 40 |     "chrome-webstore-upload": "^0.2.2",
 41 |     "chromedriver": "^2.33.2",
 42 |     "cross-env": "^3.1.3",
 43 |     "crx": "^3.0.3",
 44 |     "css-loader": "^0.25.0",
 45 |     "css-modules-require-hook": "^4.0.5",
 46 |     "css-to-string-loader": "^0.1.3",
 47 |     "eslint": "^3.9.1",
 48 |     "eslint-config-airbnb": "^12.0.0",
 49 |     "eslint-plugin-import": "^1.16.0",
 50 |     "eslint-plugin-jsx-a11y": "^2.2.3",
 51 |     "eslint-plugin-react": "^6.5.0",
 52 |     "extract-text-webpack-plugin": "^3.0.2",
 53 |     "file-loader": "^1.1.11",
 54 |     "gh-release": "^3.2.1",
 55 |     "jsdom": "^9.2.1",
 56 |     "memfs": "^2.9.4",
 57 |     "mini-css-extract-plugin": "^0.4.1",
 58 |     "minimist": "^1.2.0",
 59 |     "mocha": "^3.1.2",
 60 |     "postcss-loader": "^2.1.5",
 61 |     "pug-cli": "^1.0.0-alpha6",
 62 |     "raw-loader": "^0.5.1",
 63 |     "rimraf": "^2.4.3",
 64 |     "selenium-webdriver": "^2.47.0",
 65 |     "shelljs": "^0.7.0",
 66 |     "sinon": "^1.17.1",
 67 |     "style-loader": "^0.13.1",
 68 |     "uglifyjs-webpack-plugin": "^1.2.7",
 69 |     "url-loader": "^1.0.1",
 70 |     "webpack": "^4.15.0",
 71 |     "webpack-bundle-analyzer": "^2.13.1",
 72 |     "webpack-cli": "^3.0.8",
 73 |     "webpack-hot-middleware": "^2.10.0",
 74 |     "webpack-httpolyglot-server": "^0.3.0",
 75 |     "write-assets-webpack-plugin": "^1.0.4"
 76 |   },
 77 |   "dependencies": {
 78 |     "@babel/core": "^7.0.0-beta.52",
 79 |     "@babel/plugin-transform-runtime": "^7.0.0-beta.52",
 80 |     "@babel/preset-env": "^7.0.0-beta.52",
 81 |     "@babel/preset-react": "^7.0.0-beta.52",
 82 |     "@babel/runtime": "^7.0.0-beta.52",
 83 |     "autoprefixer": "^7.2.5",
 84 |     "bluebird": "^3.5.1",
 85 |     "chrome-ext-messenger": "^2.0.12",
 86 |     "classnames": "^2.2.6",
 87 |     "core-js": "^2.5.7",
 88 |     "cssobj-converter": "^2.3.3",
 89 |     "data-uri-to-blob": "^0.0.4",
 90 |     "diff-match-patch": "^1.0.1",
 91 |     "filenamify": "^2.1.0",
 92 |     "js-yaml": "^3.12.0",
 93 |     "jshashes": "^1.0.7",
 94 |     "lodash": "^4.17.10",
 95 |     "memoizee": "^0.4.12",
 96 |     "optimal-select": "^4.0.1",
 97 |     "postcss-cssnext": "^3.1.0",
 98 |     "postcss-import": "^11.1.0",
 99 |     "raven-js": "^3.26.3",
100 |     "react": "^16.4.1",
101 |     "react-copy-to-clipboard": "^5.0.1",
102 |     "react-dock": "^0.2.4",
103 |     "react-dom": "^16.4.1",
104 |     "react-onclickoutside": "^6.7.1",
105 |     "react-s3-uploader": "^4.8.0",
106 |     "react-shadow": "^16.3.0",
107 |     "react-syntax-highlighter": "^8.0.1",
108 |     "redux": "^3.2.1",
109 |     "redux-thunk": "^2.0.1",
110 |     "reset-css": "^4.0.1",
111 |     "sticky-js": "^1.2.0",
112 |     "stylesheet-differ": "^0.0.21",
113 |     "url-parse": "^1.4.1",
114 |     "url-pattern": "^1.0.3"
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/scripts/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "shelljs": true
 4 |   },
 5 |   "rules": {
 6 |     "no-console": 0,
 7 |     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
 1 | const tasks = require('./tasks');
 2 | 
 3 | tasks.replaceWebpack();
 4 | console.log('[Copy assets]');
 5 | console.log('-'.repeat(80));
 6 | tasks.copyAssets('build');
 7 | 
 8 | console.log('[Webpack Build]');
 9 | console.log('-'.repeat(80));
10 | exec('webpack --config webpack/prod.config.js --progress --profile --colors');
11 | 


--------------------------------------------------------------------------------
/scripts/compress.js:
--------------------------------------------------------------------------------
  1 | const fs = require("fs");
  2 | const ChromeExtension = require("crx");
  3 | const path = require("path");
  4 | 
  5 | const RELEASES_PATH = path.join(__dirname, "../releases");
  6 | const BUILD_PATH = path.join(__dirname, "../build");
  7 | const manifest = require(path.join(BUILD_PATH, "manifest.json"));
  8 | const name = manifest.name;
  9 | const version = manifest.version;
 10 | const argv = require("minimist")(process.argv.slice(2));
 11 | 
 12 | const keyPath = argv.key || "key.pem";
 13 | const existsKey = fs.existsSync(keyPath);
 14 | const crx = new ChromeExtension({
 15 |   appId: argv["app-id"],
 16 |   codebase: argv.codebase,
 17 |   privateKey: existsKey ? fs.readFileSync(keyPath) : null
 18 | });
 19 | 
 20 | const ghRelease = require("gh-release");
 21 | 
 22 | const baseName = `${name}-${version}`;
 23 | const crxFilename = path.join(RELEASES_PATH, `${baseName}.crx`);
 24 | const zipFileName = path.join(RELEASES_PATH, `${baseName}.zip`);
 25 | 
 26 | crx
 27 |   .load(BUILD_PATH)
 28 |   .then(() => crx.loadContents())
 29 |   .then(async archiveBuffer => {
 30 |     return new Promise((resolve, reject) => {
 31 |       fs.writeFile(zipFileName, archiveBuffer, () => {
 32 |         console.log(`Wrote ${zipFileName}`);
 33 | 
 34 |         const CREDENTIALS_PATH = path.join(__dirname, "../credentials.json");
 35 |         if (!!argv["release"]) {
 36 |           if (!fs.existsSync(CREDENTIALS_PATH)) {
 37 |             console.error(
 38 |               "Expected credentials.json at ",
 39 |               CREDENTIALS_PATH,
 40 |               "to look like",
 41 |               {
 42 |                 clientId: "CLIENT_ID",
 43 |                 clientSecret: "CLIENT_SECRET",
 44 |                 access_token: "ACCESS_TOKEN",
 45 |                 expires_in: 3600,
 46 |                 refreshToken: "REFRESH_TOKEN",
 47 |                 scope: "https://www.googleapis.com/auth/chromewebstore",
 48 |                 token_type: "Bearer"
 49 |               }
 50 |             );
 51 |             process.exit();
 52 |             return;
 53 |           }
 54 | 
 55 |           console.log("Uploading to Chrome Store...");
 56 |           const webStore = require("chrome-webstore-upload")({
 57 |             ...require(CREDENTIALS_PATH),
 58 |             extensionId: "emplcligcppnlalfjknjbanolhlnkmgp"
 59 |           });
 60 | 
 61 |           webStore
 62 |             .fetchToken()
 63 |             .then(token => {
 64 |               return webStore
 65 |                 .uploadExisting(fs.createReadStream(zipFileName), token)
 66 |                 .then(res => {
 67 |                   console.log(res);
 68 |                   console.log("Uploaded to Chrome Store...Publishing");
 69 |                   return webStore.publish("default", token);
 70 |                 })
 71 |                 .then(res => {
 72 |                   console.log(res);
 73 |                   console.log(
 74 |                     `Published ${version} to Chrome Store successfully`
 75 |                   );
 76 |                 });
 77 |             })
 78 |             .catch(err => console.error(err));
 79 |         }
 80 |       });
 81 | 
 82 |       return resolve(
 83 |         crx.pack(archiveBuffer).then(crxBuffer => {
 84 |           return new Promise((resolve, reject) => {
 85 |             fs.writeFile(crxFilename, crxBuffer, () => {
 86 |               console.log(`Wrote ${crxFilename}`);
 87 |               resolve();
 88 |             });
 89 |           });
 90 |         })
 91 |       );
 92 |     });
 93 |   })
 94 |   .then(() => {
 95 |     if (!argv["release"]) {
 96 |       return;
 97 |     }
 98 | 
 99 |     const options = {
100 |       tag_name: `v${version}`,
101 |       version: version,
102 |       target_commitish: "master",
103 |       name: `v${version}`,
104 |       draft: false,
105 |       prerelease: false,
106 |       repo: "styleurl-extension",
107 |       owner: "Jarred-Sumner",
108 |       endpoint: "https://api.github.com",
109 |       auth: require(`/Users/${
110 |         process.env.USER
111 |       }/Library/Application Support/gh-release/config.json`),
112 |       assets: [`./releases/${baseName}.crx`, `./releases/${baseName}.zip`]
113 |     };
114 | 
115 |     return new Promise((resolve, reject) => {
116 |       ghRelease(options, function(err, result) {
117 |         if (err) {
118 |           reject(err);
119 |           return;
120 |         }
121 | 
122 |         resolve(result); // create release response: https://developer.github.com/v3/repos/releases/#response-4
123 |       });
124 |     });
125 |   })
126 |   .catch(err => {
127 |     console.error(err);
128 |   });
129 | 


--------------------------------------------------------------------------------
/scripts/dev.js:
--------------------------------------------------------------------------------
 1 | const tasks = require('./tasks');
 2 | const createWebpackServer = require('webpack-httpolyglot-server');
 3 | const devConfig = require('../webpack/dev.config');
 4 | 
 5 | tasks.replaceWebpack();
 6 | console.log('[Copy assets]');
 7 | console.log('-'.repeat(80));
 8 | tasks.copyAssets('dev');
 9 | 
10 | console.log('[Webpack Dev]');
11 | console.log('-'.repeat(80));
12 | console.log('If you\'re developing Inject page,');
13 | console.log('please allow `https://localhost:3000` connections in Google Chrome,');
14 | console.log('and load unpacked extensions with `./dev` folder. (see https://developer.chrome.com/extensions/getstarted#unpacked)\n');
15 | createWebpackServer(devConfig, {
16 |   host: 'localhost',
17 |   port: 3000
18 | });
19 | 


--------------------------------------------------------------------------------
/scripts/tasks.js:
--------------------------------------------------------------------------------
 1 | require('shelljs/global');
 2 | 
 3 | exports.replaceWebpack = () => {
 4 |   const replaceTasks = [{
 5 |     from: 'webpack/replace/JsonpMainTemplate.runtime.js',
 6 |     to: 'node_modules/webpack/lib/JsonpMainTemplate.runtime.js'
 7 |   }, {
 8 |     from: 'webpack/replace/process-update.js',
 9 |     to: 'node_modules/webpack-hot-middleware/process-update.js'
10 |   }];
11 | 
12 |   replaceTasks.forEach(task => cp(task.from, task.to));
13 | };
14 | 
15 | exports.copyAssets = (type) => {
16 |   const env = type === 'build' ? 'prod' : type;
17 |   rm('-rf', type);
18 |   mkdir(type);
19 |   cp(`chrome/manifest.${env}.json`, `${type}/manifest.json`);
20 |   cp('-R', 'chrome/assets/*', type);
21 |   exec(`pug -O "{ env: '${env}' }" -o ${type} chrome/views/`);
22 | };
23 | 


--------------------------------------------------------------------------------
/scripts/update-readme.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | var path = require("path");
 3 | var changelogParser = require("changelog-parser");
 4 | 
 5 | const root = path.resolve(__dirname, "..");
 6 | 
 7 | var pkg = require(path.resolve(root, "package.json"));
 8 | var logPath = path.resolve(root, "CHANGELOG.md");
 9 | const README_PATH = path.resolve(root, "README.md");
10 | const _ = require("lodash");
11 | 
12 | const README = fs.readFileSync(README_PATH, "utf-8");
13 | 
14 | const WHATS_NEW_STRING = "### What's New";
15 | 
16 | function formatDate(date) {
17 |   var monthNames = [
18 |     "January",
19 |     "February",
20 |     "March",
21 |     "April",
22 |     "May",
23 |     "June",
24 |     "July",
25 |     "August",
26 |     "September",
27 |     "October",
28 |     "November",
29 |     "December"
30 |   ];
31 | 
32 |   var day = date.getDate();
33 |   var monthIndex = date.getMonth();
34 |   var year = date.getFullYear();
35 | 
36 |   return monthNames[monthIndex] + " " + day + ", " + year;
37 | }
38 | 
39 | changelogParser(logPath, function(err, result) {
40 |   if (err) throw err;
41 | 
42 |   // check for 'unreleased' section in CHANGELOG: allow sections which do not include a body (eg. 'Added', 'Changed', etc.)
43 | 
44 |   var unreleased = result.versions
45 |     .filter(function(release) {
46 |       return release.title && release.title.toLowerCase
47 |         ? release.title.toLowerCase().indexOf("unreleased") !== -1
48 |         : false;
49 |     })
50 |     .filter(function(release) {
51 |       return !!release.body;
52 |     });
53 | 
54 |   if (unreleased.length > 0) {
55 |     throw new Error("Unreleased changes detected in CHANGELOG.md, aborting");
56 |   }
57 | 
58 |   var log = result.versions.filter(function(release) {
59 |     return release.version !== null;
60 |   })[0];
61 | 
62 |   if (!log) {
63 |     throw new Error("Changelog missing");
64 |   }
65 | 
66 |   const whatsNewIndex = README.indexOf(WHATS_NEW_STRING);
67 |   const hasWhatsNewSection = whatsNewIndex > -1;
68 |   console.log(README);
69 |   if (!hasWhatsNewSection) {
70 |     throw new Error(`README is missing ${WHATS_NEW_STRING}`);
71 |   }
72 | 
73 |   const whatsNewEnd = README.substr(whatsNewIndex).indexOf("---");
74 | 
75 |   const whatsNewSection = `${WHATS_NEW_STRING} (v${log.version} - ${formatDate(
76 |     new Date()
77 |   )})
78 | 
79 | ${log.body}
80 | 
81 | ---
82 |   `;
83 |   const newReadMe =
84 |     README.substr(0, whatsNewIndex) +
85 |     whatsNewSection +
86 |     README.substr(whatsNewIndex + whatsNewEnd + "\n---".length);
87 |   fs.writeFileSync(README_PATH, newReadMe);
88 | });
89 | 


--------------------------------------------------------------------------------
/webpack/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/webpack/customPublicPath.js:
--------------------------------------------------------------------------------
 1 | /* global __webpack_public_path__ __HOST__ __PORT__ */
 2 | /* eslint no-global-assign: 0 camelcase: 0 */
 3 | 
 4 | if (process.env.NODE_ENV === "production") {
 5 |   __webpack_public_path__ = chrome.extension.getURL("");
 6 | } else {
 7 |   // In development mode,
 8 |   // the iframe of injectpage cannot get correct path,
 9 |   // it need to get parent page protocol.
10 |   const path = `//${__HOST__}:${__PORT__}/`;
11 |   if (
12 |     location.protocol === "https:" ||
13 |     location.search.indexOf("protocol=https") !== -1
14 |   ) {
15 |     __webpack_public_path__ = `https:${path}`;
16 |   } else {
17 |     __webpack_public_path__ = `http:${path}`;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/webpack/dev.config.js:
--------------------------------------------------------------------------------
  1 | const path = require("path");
  2 | const webpack = require("webpack");
  3 | const WriteAssetsWebpackPlugin = require("write-assets-webpack-plugin");
  4 | const ExtractTextPlugin = require("extract-text-webpack-plugin");
  5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  6 | 
  7 | const autoprefixer = require("autoprefixer");
  8 | 
  9 | const host = "localhost";
 10 | const port = 3000;
 11 | const customPath = path.join(__dirname, "./customPublicPath");
 12 | const hotScript =
 13 |   "webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true";
 14 | 
 15 | module.exports = {
 16 |   devtool: "eval-cheap-module-source-map",
 17 |   node: {
 18 |     dns: "empty",
 19 |     net: "empty"
 20 |   },
 21 |   entry: {
 22 |     inline_style_observer: [
 23 |       customPath,
 24 |       path.join(__dirname, "../chrome/extension/inline_style_observer")
 25 |     ],
 26 |     css_manager_content_script: [
 27 |       customPath,
 28 |       path.join(__dirname, "../chrome/extension/css_manager_content_script")
 29 |     ],
 30 |     version_info: [
 31 |       customPath,
 32 |       path.join(__dirname, "../chrome/extension/version_info")
 33 |     ],
 34 |     create_styleurl: [
 35 |       customPath,
 36 |       path.join(__dirname, "../chrome/extension/create_styleurl")
 37 |     ],
 38 |     view_styleurl: [
 39 |       customPath,
 40 |       path.join(__dirname, "../chrome/extension/create_styleurl")
 41 |     ],
 42 |     inject_create_styleurl: [
 43 |       customPath,
 44 |       path.join(__dirname, "../chrome/extension/inject_create_styleurl")
 45 |     ],
 46 |     inject_view_styleurl: [
 47 |       customPath,
 48 |       path.join(__dirname, "../chrome/extension/inject_view_styleurl")
 49 |     ],
 50 |     background: [
 51 |       customPath,
 52 |       hotScript,
 53 |       path.join(__dirname, "../chrome/extension/background")
 54 |     ],
 55 |     devtools: [
 56 |       customPath,
 57 |       hotScript,
 58 |       path.join(__dirname, "../chrome/extension/devtools")
 59 |     ],
 60 |     github_gist_content_script: [
 61 |       customPath,
 62 |       path.join(__dirname, "../chrome/extension/github_gist_content_script")
 63 |     ]
 64 |   },
 65 |   devMiddleware: {
 66 |     publicPath: `http://${host}:${port}/`,
 67 |     stats: {
 68 |       colors: true
 69 |     },
 70 |     noInfo: true,
 71 |     headers: { "Access-Control-Allow-Origin": "*" }
 72 |   },
 73 |   mode: "development",
 74 |   hotMiddleware: {
 75 |     path: "/__webpack_hmr"
 76 |   },
 77 |   output: {
 78 |     path: path.join(__dirname, "../dev"),
 79 |     filename: "[name].bundle.js",
 80 |     chunkFilename: "[id].chunk.js"
 81 |   },
 82 |   plugins: [
 83 |     new webpack.ContextReplacementPlugin(
 84 |       /monaco-editor(\\|\/)esm(\\|\/)vs(\\|\/)editor(\\|\/)common(\\|\/)services/,
 85 |       __dirname
 86 |     ),
 87 |     new webpack.HotModuleReplacementPlugin(),
 88 |     new webpack.NoEmitOnErrorsPlugin(),
 89 |     new webpack.IgnorePlugin(/[^/]+\/[\S]+.prod$/),
 90 |     new webpack.DefinePlugin({
 91 |       __HOST__: `'${host}'`,
 92 |       __PORT__: port,
 93 |       __API_HOST__: "`http://localhost:3001`",
 94 |       __FRONTEND_HOST__: "`http://localhost:3002`",
 95 |       "process.env": {
 96 |         NODE_ENV: JSON.stringify("development")
 97 |       }
 98 |     }),
 99 |     new MiniCssExtractPlugin({
100 |       // Options similar to the same options in webpackOptions.output
101 |       // both options are optional
102 |       filename: "[name].css",
103 |       chunkFilename: "[id].css"
104 |     }),
105 |     new WriteAssetsWebpackPlugin({ force: true, extension: ["js", "css"] })
106 |   ],
107 |   resolve: {
108 |     extensions: ["*", ".js"],
109 |     alias: {
110 |       fs: "memfs"
111 |     }
112 |   },
113 |   module: {
114 |     rules: [
115 |       {
116 |         test: /\.ttf$/,
117 |         use: {
118 |           loader: "file-loader"
119 |         }
120 |       },
121 |       {
122 |         test: /\.js$/,
123 |         exclude: /(node_modules|bower_components)/,
124 |         use: {
125 |           loader: "babel-loader",
126 |           options: {
127 |             plugins: [
128 |               "@babel/plugin-proposal-class-properties",
129 |               "lodash",
130 |               [
131 |                 "module-resolver",
132 |                 {
133 |                   root: [path.join(__dirname, "../chrome")]
134 |                 }
135 |               ]
136 |             ],
137 |             presets: [
138 |               "@babel/preset-react",
139 |               [
140 |                 "@babel/preset-env",
141 |                 {
142 |                   targets: {
143 |                     browsers: ["last 2 Chrome versions"]
144 |                   }
145 |                 }
146 |               ]
147 |             ],
148 |             babelrc: false
149 |           }
150 |         }
151 |       },
152 |       {
153 |         test: /\.css$/,
154 |         use: [
155 |           {
156 |             loader: MiniCssExtractPlugin.loader
157 |           },
158 |           { loader: "css-loader", options: { importLoaders: 1 } },
159 |           {
160 |             loader: "postcss-loader",
161 |             options: {
162 |               exclude: /(node_modules|bower_components)/
163 |             }
164 |           }
165 |         ]
166 |       }
167 |     ]
168 |   }
169 | };
170 | 


--------------------------------------------------------------------------------
/webpack/prod.config.js:
--------------------------------------------------------------------------------
  1 | const path = require("path");
  2 | const webpack = require("webpack");
  3 | const autoprefixer = require("autoprefixer");
  4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  5 | const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
  6 | 
  7 | const customPath = path.join(__dirname, "./customPublicPath");
  8 | 
  9 | module.exports = {
 10 |   node: {
 11 |     dns: "empty",
 12 |     net: "empty"
 13 |   },
 14 |   entry: {
 15 |     inline_style_observer: [
 16 |       customPath,
 17 |       path.join(__dirname, "../chrome/extension/inline_style_observer")
 18 |     ],
 19 |     version_info: [
 20 |       customPath,
 21 |       path.join(__dirname, "../chrome/extension/version_info")
 22 |     ],
 23 |     css_manager_content_script: [
 24 |       customPath,
 25 |       path.join(__dirname, "../chrome/extension/css_manager_content_script")
 26 |     ],
 27 |     create_styleurl: [
 28 |       customPath,
 29 |       path.join(__dirname, "../chrome/extension/create_styleurl")
 30 |     ],
 31 |     view_styleurl: [
 32 |       customPath,
 33 |       path.join(__dirname, "../chrome/extension/create_styleurl")
 34 |     ],
 35 |     inject_create_styleurl: [
 36 |       customPath,
 37 |       path.join(__dirname, "../chrome/extension/inject_create_styleurl")
 38 |     ],
 39 |     inject_view_styleurl: [
 40 |       customPath,
 41 |       path.join(__dirname, "../chrome/extension/inject_view_styleurl")
 42 |     ],
 43 |     background: [
 44 |       customPath,
 45 |       path.join(__dirname, "../chrome/extension/background")
 46 |     ],
 47 |     devtools: [
 48 |       customPath,
 49 |       path.join(__dirname, "../chrome/extension/devtools")
 50 |     ],
 51 |     github_gist_content_script: [
 52 |       customPath,
 53 |       path.join(__dirname, "../chrome/extension/github_gist_content_script")
 54 |     ]
 55 |   },
 56 |   output: {
 57 |     path: path.join(__dirname, "../build"),
 58 |     filename: "[name].bundle.js",
 59 |     chunkFilename: "[id].chunk.js"
 60 |   },
 61 |   optimization: {
 62 |     // I thought it was Chrome Store that disallows minification...but turns out it's Firefox.
 63 |     // https://developer.mozilla.org/en-US/Add-ons/AMO/Policy/Reviews#Source_Code_Submission
 64 |     minimizer: [
 65 |       new UglifyJSPlugin({
 66 |         sourceMap: true,
 67 |         uglifyOptions: {
 68 |           ecma: 8,
 69 |           compress: {
 70 |             ecma: 8
 71 |           },
 72 |           mangle: false,
 73 |           keep_classnames: true,
 74 |           keep_fnames: true,
 75 |           output: {
 76 |             ascii_only: true,
 77 |             beautify: true,
 78 |             ecma: 8
 79 |           }
 80 |         }
 81 |       })
 82 |     ],
 83 |     nodeEnv: "production"
 84 |   },
 85 |   mode: "production",
 86 |   plugins: [
 87 |     new webpack.optimize.OccurrenceOrderPlugin(),
 88 |     new webpack.IgnorePlugin(/[^/]+\/[\S]+.dev$/),
 89 |     new webpack.DefinePlugin({
 90 |       __API_HOST__: "`https://api.styleurl.app`",
 91 |       __FRONTEND_HOST__: "`https://www.styleurl.app`",
 92 |       "process.env": {
 93 |         NODE_ENV: JSON.stringify("production")
 94 |       }
 95 |     }),
 96 |     new MiniCssExtractPlugin({
 97 |       // Options similar to the same options in webpackOptions.output
 98 |       // both options are optional
 99 |       filename: "[name].css",
100 |       chunkFilename: "[id].css"
101 |     })
102 |   ],
103 |   resolve: {
104 |     extensions: ["*", ".js"],
105 |     alias: {
106 |       fs: "memfs"
107 |     }
108 |   },
109 |   module: {
110 |     rules: [
111 |       {
112 |         test: /\.ttf$/,
113 |         use: {
114 |           loader: "file-loader"
115 |         }
116 |       },
117 |       {
118 |         test: /\.js$/,
119 |         exclude: /(node_modules|bower_components)/,
120 |         use: {
121 |           loader: "babel-loader",
122 |           options: {
123 |             plugins: [
124 |               "@babel/plugin-proposal-class-properties",
125 |               "lodash",
126 |               [
127 |                 "module-resolver",
128 |                 {
129 |                   root: [path.join(__dirname, "../chrome")]
130 |                 }
131 |               ],
132 |               ["transform-remove-console", { exclude: ["error", "warn"] }]
133 |             ],
134 |             presets: [
135 |               "@babel/preset-react",
136 |               [
137 |                 "@babel/preset-env",
138 |                 {
139 |                   targets: {
140 |                     browsers: ["last 2 Chrome versions"]
141 |                   }
142 |                 }
143 |               ]
144 |             ],
145 |             babelrc: false
146 |           }
147 |         }
148 |       },
149 |       {
150 |         test: /\.css$/,
151 |         use: [
152 |           {
153 |             loader: MiniCssExtractPlugin.loader
154 |           },
155 |           { loader: "css-loader", options: { importLoaders: 1 } },
156 |           {
157 |             loader: "postcss-loader",
158 |             options: {
159 |               exclude: /(node_modules|bower_components)/
160 |             }
161 |           }
162 |         ]
163 |       }
164 |     ]
165 |   }
166 | };
167 | 


--------------------------------------------------------------------------------
/webpack/replace/JsonpMainTemplate.runtime.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	MIT License http://www.opensource.org/licenses/mit-license.php
 3 | 	Author Tobias Koppers @sokra
 4 | */
 5 | /*globals hotAddUpdateChunk parentHotUpdateCallback document XMLHttpRequest $require$ $hotChunkFilename$ $hotMainFilename$ */
 6 | module.exports = function() {
 7 | 	function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
 8 | 		hotAddUpdateChunk(chunkId, moreModules);
 9 | 		if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
10 | 	}
11 | 
12 |   var context = this;
13 |   function evalCode(code, context) {
14 |     return (function() { return eval(code); }).call(context);
15 |   }
16 | 
17 |   context.hotDownloadUpdateChunk = function (chunkId) { // eslint-disable-line no-unused-vars
18 |     var src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js";
19 |     var request = new XMLHttpRequest();
20 | 
21 |     request.onload = function() {
22 | 			evalCode(this.responseText, context);
23 | 		};
24 |     request.open("get", src, true);
25 |     request.send();
26 |   }
27 | 
28 | 	function hotDownloadManifest(timeout) { // eslint-disable-line no-unused-vars
29 | 		timeout = timeout || 1000;
30 | 		return new Promise((resolve, reject)=> {
31 |       if(typeof XMLHttpRequest === "undefined")
32 |         return reject(new Error("No browser support"));
33 |       try {
34 |         var request = new XMLHttpRequest();
35 |         var requestPath = $require$.p + $hotMainFilename$;
36 |         request.open("GET", requestPath, true);
37 |         request.timeout = timeout;
38 |         request.send(null);
39 |       } catch(err) {
40 |         return reject(err);
41 |       }
42 |       request.onreadystatechange = function() {
43 |         if(request.readyState !== 4) return;
44 |         if(request.status === 0) {
45 |           // timeout
46 |           reject(new Error("Manifest request to " + requestPath + " timed out."));
47 |         } else if(request.status === 404) {
48 |           // no update available
49 |           reject(new Error('no update available'));
50 |         } else if(request.status !== 200 && request.status !== 304) {
51 |           // other failure
52 |           reject(new Error("Manifest request to " + requestPath + " failed."));
53 |         } else {
54 |           // success
55 |           try {
56 |             var update = JSON.parse(request.responseText);
57 |           } catch(e) {
58 |             callback(e);
59 |             return;
60 |           }
61 |           resolve(update);
62 |         }
63 |       };
64 | 		});
65 | 	}
66 | };
67 | 


--------------------------------------------------------------------------------
/webpack/replace/process-update.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Based heavily on https://github.com/webpack/webpack/blob/
  3 |  *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
  4 |  * Original copyright Tobias Koppers @sokra (MIT license)
  5 |  */
  6 | 
  7 | /* global window __webpack_hash__ */
  8 | 
  9 | if (!module.hot) {
 10 |   throw new Error("[HMR] Hot Module Replacement is disabled.");
 11 | }
 12 | 
 13 | var hmrDocsUrl = "http://webpack.github.io/docs/hot-module-replacement-with-webpack.html"; // eslint-disable-line max-len
 14 | 
 15 | var lastHash;
 16 | var failureStatuses = { abort: 1, fail: 1 };
 17 | var applyOptions = { ignoreUnaccepted: true };
 18 | 
 19 | function upToDate(hash) {
 20 |   if (hash) lastHash = hash;
 21 |   return lastHash == __webpack_hash__;
 22 | }
 23 | 
 24 | module.exports = function(hash, moduleMap, options) {
 25 |   var reload = options.reload;
 26 |   if (!upToDate(hash) && module.hot.status() == "idle") {
 27 |     if (options.log) console.log("[HMR] Checking for updates on the server...");
 28 |     check();
 29 |   }
 30 | 
 31 |   function check() {
 32 |     var cb = function(err, updatedModules) {
 33 |       if (err) return handleError(err);
 34 | 
 35 |       if(!updatedModules) {
 36 |         if (options.warn) {
 37 |           console.warn("[HMR] Cannot find update (Full reload needed)");
 38 |           console.warn("[HMR] (Probably because of restarting the server)");
 39 |         }
 40 |         performReload();
 41 |         return null;
 42 |       }
 43 | 
 44 |       var applyCallback = function(applyErr, renewedModules) {
 45 |         if (applyErr) return handleError(applyErr);
 46 | 
 47 |         if (!upToDate()) check();
 48 | 
 49 |         logUpdates(updatedModules, renewedModules);
 50 |       };
 51 | 
 52 |       var applyResult = module.hot.apply(applyOptions, applyCallback);
 53 |       // webpack 2 promise
 54 |       if (applyResult && applyResult.then) {
 55 |         // HotModuleReplacement.runtime.js refers to the result as `outdatedModules`
 56 |         applyResult.then(function(outdatedModules) {
 57 |           applyCallback(null, outdatedModules);
 58 |         });
 59 |         applyResult.catch(applyCallback);
 60 |       }
 61 | 
 62 |     };
 63 | 
 64 |     var result = module.hot.check(false, cb);
 65 |     // webpack 2 promise
 66 |     if (result && result.then) {
 67 |         result.then(function(updatedModules) {
 68 |             cb(null, updatedModules);
 69 |         });
 70 |         result.catch(cb);
 71 |     }
 72 |   }
 73 | 
 74 |   function logUpdates(updatedModules, renewedModules) {
 75 |     var unacceptedModules = updatedModules.filter(function(moduleId) {
 76 |       return renewedModules && renewedModules.indexOf(moduleId) < 0;
 77 |     });
 78 | 
 79 |     if(unacceptedModules.length > 0) {
 80 |       if (options.warn) {
 81 |         console.warn(
 82 |           "[HMR] The following modules couldn't be hot updated: " +
 83 |           "(Full reload needed)\n" +
 84 |           "This is usually because the modules which have changed " +
 85 |           "(and their parents) do not know how to hot reload themselves. " +
 86 |           "See " + hmrDocsUrl + " for more details."
 87 |         );
 88 |         unacceptedModules.forEach(function(moduleId) {
 89 |           console.warn("[HMR]  - " + moduleMap[moduleId]);
 90 |         });
 91 |       }
 92 |       /* replaced part start */
 93 |       if (chrome && chrome.runtime && chrome.runtime.reload) {
 94 |         console.warn("[HMR] extension reload");
 95 |         chrome.runtime.reload();
 96 |         return;
 97 |       }
 98 |       /* replaced part end */
 99 |       performReload();
100 |       return;
101 |     }
102 | 
103 |     if (options.log) {
104 |       if(!renewedModules || renewedModules.length === 0) {
105 |         console.log("[HMR] Nothing hot updated.");
106 |       } else {
107 |         console.log("[HMR] Updated modules:");
108 |         renewedModules.forEach(function(moduleId) {
109 |           console.log("[HMR]  - " + moduleMap[moduleId]);
110 |         });
111 |       }
112 | 
113 |       if (upToDate()) {
114 |         console.log("[HMR] App is up to date.");
115 |       }
116 |     }
117 |   }
118 | 
119 |   function handleError(err) {
120 |     if (module.hot.status() in failureStatuses) {
121 |       if (options.warn) {
122 |         console.warn("[HMR] Cannot check for update (Full reload needed)");
123 |         console.warn("[HMR] " + err.stack || err.message);
124 |       }
125 |       performReload();
126 |       return;
127 |     }
128 |     if (options.warn) {
129 |       console.warn("[HMR] Update check failed: " + err.stack || err.message);
130 |     }
131 |   }
132 | 
133 |   function performReload() {
134 |     if (reload) {
135 |       if (options.warn) console.warn("[HMR] Reloading page");
136 |       window.location.reload();
137 |     }
138 |   }
139 | };
140 | 


--------------------------------------------------------------------------------
/webpack/test.config.js:
--------------------------------------------------------------------------------
 1 | // for babel-plugin-webpack-loaders
 2 | const config = require("./prod.config");
 3 | 
 4 | module.exports = {
 5 |   node: {
 6 |     fs: "mock",
 7 |     dns: "empty",
 8 |     net: "empty"
 9 |   },
10 |   output: {
11 |     libraryTarget: "commonjs2"
12 |   },
13 |   module: {
14 |     loaders: config.module.rules.slice(1) // remove babel-loader
15 |   }
16 | };
17 | 


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