Skip to content

implement chrome.storage to sync custom style #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

implement chrome.storage to sync custom style #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion extension/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,8 @@
"css": ["my-style.css"],
"js": ["my-style.js"],
"run_at": "document_start"
}]
}],
"permissions": [
"storage"
]
}
22 changes: 17 additions & 5 deletions extension/my-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
var ONLY_WHITESPACE_REGEX = /^\s*$/;
var WHITESPACE_SPLIT_REGEX = /\s+$/g;

var host = window.location.host;

/* Throttle the given function, condensing multiple calls into one call after
* the given timeout period. In other words, allow at most one call to go
* through per timeout period. Returns the throttled function.
Expand Down Expand Up @@ -47,6 +49,9 @@
var style = document.createElement('style');
var textarea = document.createElement('textarea');

var myStyle = {};


// hide textarea by default
textarea.style.display = 'none';
textarea.id = 'my-style-input';
Expand All @@ -55,8 +60,11 @@
head.appendChild(style);
body.appendChild(textarea);

style.innerHTML = localStorage.myStyle || '';
textarea.value = style.innerHTML;
chrome.storage.sync.get(host, function(myStyle) {
style.innerHTML = myStyle[host] || '';
textarea.value = myStyle[host] || '';
});

textarea.placeholder = '/* Enter your styles here. */';

// alt + click on an element adds its selector to the textarea
Expand Down Expand Up @@ -91,7 +99,7 @@
// fill CSS with styles defined in the style attribute
if (target.getAttribute('style')) {
stylesList = target.getAttribute('style').split(';');

// keep track of CSS properties already defined in style attribute
for (i = 0; i < stylesList.length; i++) {
// condense mutliple whitespace into one space
Expand All @@ -103,7 +111,7 @@
}
}
}

// construct text to add to textarea
if (selector) {
// add existing styles in braces
Expand All @@ -128,7 +136,11 @@

/* Save styles persistently in local storage. */
var saveStyles = throttle(function() {
localStorage.myStyle = style.innerHTML;
var myStyle = {};

myStyle[host] = style.innerHTML;

chrome.storage.sync.set(myStyle);
}, 500);

/* Updates styles with content in textarea and saves styles. */
Expand Down