jarred-sumner / styleurl-extension Goto Github PK

View Code? Open in Web Editor NEW

188.0 5.0 8.0 5.16 MB

Share & export CSS tweaks from Chrome instantly.

Home Page: https://www.styleurl.app

License: GNU Affero General Public License v3.0

JavaScript 88.98% CSS 10.29% HTML 0.73%

chrome extension css styleurls chrome-extension stylesheet javascript

styleurl-extension's Introduction

StyleURL Extension

StyleURL is the easiest way for developers & designers to collaborate on CSS changes. This is the source code for the Chrome extension.

What's New (v1.1.15 - August 4, 2018)

Fix bug in feedback box in ViewStyleURL bar

Export CSS from Chrome

Make style changes from Chrome Inspector, and StyleURL will show you the diff of your CSS changes in the page.

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.

Save to Gist

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.

Preview live changes from a link

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).

Stylefile - an open standard for user style metadata

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.

Example Stylefile:

---
version: 1.0 # Optional
domains: # Required
- news.ycombinator.com
url_patterns: # Required
- news.ycombinator.com/*
timestamp: '2018-07-27T04:21:42Z' # Optional
id: 6GJP # Optional, not currently used
redirect_url: https://news.ycombinator.com/ # Required
shared_via: StyleURL – import and export CSS changes from Chrome Inspector to a Gist
  you can share (like this one!) # Optional

StyleURL generates and uses a Stylefile to:

Detect which pages a StyleURL should be applied to (url_patterns)
Detect which domains a StyleURL correspond to (domains)
When activated from a different page, which absolute URL to redirect to (redirect_url)

Under the hood, the way this works is:

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.

Development

You'll want to point it to production and make sure chrome://flags/#allow-insecure-localhost is enabled (TODO more words)

styleurl-extension's People

Contributors

Stargazers

Watchers

Forkers

loopyz abdihaikal liuderchi userimack bradparks codewein absalan iq-scm

styleurl-extension's Issues

Occasionally fails to take screenshot

Make gists secret or have an option for that

I'm not sure what there's much to gain from making public gists. (besides linking to them on your homepage) Right now I got a surprise to see that they were.

There should be at least an option to make gists secret.

Thanks!

(great app by the way!)

Diff > getResources()

Instead of getting all the chrome inspector stylesheets, we should get the diff since the start of the time they opened devtools.

http://styleurl.app/ is down

Unrealted to the repo, but http://styleurl.app/ seems to be down.
https://downforeveryoneorjustme.com/styleurl.app

Think through API limits for GitHub gist more carefully

some ideas:

cache gist contents to disk, setup webhooks for gist updates for styleurl-server and then ask styleurl-server if gist updated
pass access_token from styleurl-server to client and store it somewhere safe, and use that so api limits are per-user rahther than per-ip

Do not require personal user data (email, profile) for installation

Hi
Great extension, great idea
But it would be better if it did not require personal information access during installation. Since it is targeted at developers, I guess their privacy is important too
Could you please remove personal information collection ?
Thanks

Update the repo with correct files

This extension sounds very promising. Unfortunately, its website is down, but maybe you can update the repo with correct files so we can load it as an unpacked extension to Chrome?

For example, manifest.prod.json contains wrong paths, such as:

img/default_16x16.png

which should be:

assets/img/default_16x16.png

Closing the StyleURL modal causes it to be unable to open again

Making a change in Chrome devtools or clicking the StyleURL icon in the address bar pulls up the modal.

If I close the modal by clicking the X in the lower left, I cannot open the modal again via either of the above methods. The CSS to hide the modal is applied on close, but not removed on re-open.

Monitor inserting/removing style tags correctly

Currently, on websites that make heavy use of some of the various CSS-in-JS libraries, if the user had already created a change to a stylesheet (causing the bottom bar for StyleURL to appear), then it will count style tags removed/added as part of the diff, even though those were changed by the page instead of by the user.

Steps to reproduce:

Go to styled-components.com
Open DevTools
Edit a style
Click "Documentation"
Click "View changes"

Gif:

Notice that I go to the landing page, then click Documentation, and it shows new CSS added by the page (not by the user) in the "View diff" dropdown

I think this can be fixed via:

MutationObserver that tracks inserting and removing style tags, except when the <style /> in question is selected in the inspector (i.e. when it's $0). When a style tag is added/removed, it should be added/removed from TAB_ORIGINAL_STYLES within background.js, so that it knows the page changed it and not the user.
Better way of uniquely identifying <style /> tags. Currently, it's just the offset of the one in the page, and it gets updated everytime we get all the styles (e.g. clicking "View diff"). This behavior is probably wrong, i.e. it should likely only update the ID (data-styleurl_id) when the styletag is added to the page or if it doesn't already have one. Ideally, this ID doesn't change unless the contents of the style tag was changed by the page (not by the user)
As an extra safety precaution, should probably reset TAB_ORIGINAL_STYLES on history state updates, because right now it only does it on navigation