All Projects → Jarred-Sumner → Styleurl Extension

Jarred-Sumner / Styleurl Extension

Licence: agpl-3.0
Share & export CSS tweaks from Chrome instantly.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Styleurl Extension

Vue Chrome Extension Boilerplate
Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.
Stars: ✭ 171 (-2.29%)
Mutual labels:  extension, chrome-extension, chrome
Github Mermaid Extension
A browser extension for Chrome, Opera & Firefox that adds Mermaid language support to Github
Stars: ✭ 170 (-2.86%)
Mutual labels:  extension, chrome-extension, chrome
Web Extension Starter
🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension
Stars: ✭ 987 (+464%)
Mutual labels:  extension, chrome-extension, chrome
Nighttab
A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.
Stars: ✭ 598 (+241.71%)
Mutual labels:  extension, chrome-extension, chrome
Booklight
Your Chrome Alfred - An Extension to provide spotlight-like interface for your bookmarks
Stars: ✭ 98 (-44%)
Mutual labels:  extension, chrome-extension, chrome
Gata
Bookmarks made better
Stars: ✭ 17 (-90.29%)
Mutual labels:  extension, chrome-extension, chrome
My Notes
Simple and fast note-taking in Chrome with Google Drive support.
Stars: ✭ 155 (-11.43%)
Mutual labels:  extension, chrome-extension, chrome
Analog
Replace your new tab page with a minimal analog clock
Stars: ✭ 46 (-73.71%)
Mutual labels:  extension, chrome-extension, chrome
Podstation
podStation is a web podcast aggregator for Chrome.
Stars: ✭ 76 (-56.57%)
Mutual labels:  extension, chrome-extension, chrome
Mue
Fast, open and free-to-use new tab page for modern browsers
Stars: ✭ 56 (-68%)
Mutual labels:  extension, chrome-extension, chrome
Githuber
Display Github Trending repositories on Chrome New Tab Extensions
Stars: ✭ 418 (+138.86%)
Mutual labels:  extension, chrome-extension, chrome
Web Extension Starter
Typescript, React, Redux, Styled-Component and Webpack based sample extension boilerplate. Runs on Chrome and Firefox. Sample chrome extension.
Stars: ✭ 115 (-34.29%)
Mutual labels:  extension, chrome-extension, chrome
1click Webpage Screenshot
Entire page Screenshot extension for Google Chrome. I'm developing open source extension for Google Chrome. All extension are free for use. Let's make Chrome great again!
Stars: ✭ 406 (+132%)
Mutual labels:  extension, chrome-extension, chrome
Hangarxplor
HangarXPLOR is a chrome extension that upgrades the UI/UX of the Star Citizen hangar page
Stars: ✭ 32 (-81.71%)
Mutual labels:  extension, chrome-extension, chrome
Bilibili Helper O
哔哩哔哩 (bilibili.com) 辅助工具,可以替换播放器、推送通知并进行一些快捷操作
Stars: ✭ 3,717 (+2024%)
Mutual labels:  extension, chrome-extension, chrome
Skip Ad
A simple lightweight Chrome extension that automatically skips YouTube Ads.
Stars: ✭ 54 (-69.14%)
Mutual labels:  extension, chrome-extension, chrome
Wikipediap2p
WikipediaP2P.org Chrome Extension
Stars: ✭ 105 (-40%)
Mutual labels:  extension, chrome-extension, chrome
Span Tree
🌳 Tree for GitLab
Stars: ✭ 123 (-29.71%)
Mutual labels:  extension, chrome-extension, chrome
Synology Download Manager
An open source browser extension for adding/managing download tasks to your Synology DiskStation.
Stars: ✭ 138 (-21.14%)
Mutual labels:  chrome-extension, chrome
Surfingkeys Conf
A SurfingKeys configuration which adds 130+ key mappings for 20+ sites & OmniBar search suggestions for 50+ sites
Stars: ✭ 137 (-21.71%)
Mutual labels:  chrome-extension, chrome

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)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].