centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

Add storage sample (#947)

Browse Source 
* Add storage sample `stylizr`

* Update description

* Update api-samples/storage/stylizr/README.md

Co-authored-by: Joe Medley <jmedley@google.com>

* Clear previous timer if message called twice

* Remove innerHTML

* Update tips

* Remove IIFE

---------

Co-authored-by: Joe Medley <jmedley@google.com>
This commit is contained in:
Xuezhou Dai
2023-08-21 18:34:27 +08:00
committed by GitHub
parent 45bbd8d68d
commit 3f07ceec66
7 changed files with 189 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
api-samples/storage/stylizr/README.md Normal file
View File

@@ -0,0 +1,13 @@
# chrome.storage - Stylizr
A sample that demonstrates how to use the [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/storage/) API.
## Overview
In this sample, the `chrome.storage` API stores a custom style string that will be applied to the active page when the extension's action icon is clicked.
## Running this extension
1. Clone this repository.
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
3. Click the extension's action icon to see the effect.

BIN
api-samples/storage/stylizr/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 B

13
api-samples/storage/stylizr/manifest.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "Stylizr",
"description": "Demonstrates how to use the chrome.storage API.",
"version": "1.0",
"permissions": ["activeTab", "storage", "scripting"],
"options_page": "options.html",
"action": {
"default_icon": "icon.png",
"default_title": "Stylize!",
"default_popup": "popup.html"
},
"manifest_version": 3
}

51
api-samples/storage/stylizr/options.html Normal file
View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Stylizr</title>
<style>
body {
font-family: sans-serif;
}
label {
display: block;
}
textarea {
font-family: monospace;
}
.message {
height: 20px;
background: #eee;
padding: 5px;
}
</style>
</head>
<body>
<div class="message"></div>
<h3>Stylizr Instructions</h3>
<ol>
<li>Write CSS in this textarea and save</li>
<li>Navigate to some page</li>
<li>Click the browser action icon <img src="icon.png" /></li>
<li>Hey presto! CSS is injected!</li>
</ol>
<textarea
name="style_url"
id="style_url"
cols="80"
rows="24"
placeholder="eg: * { font-size: 110%; }"
></textarea>
<br />
<button class="submit">Save</button>
<button class="reset">Reset</button>
<script src="options.js"></script>
</body>
</html>

56
api-samples/storage/stylizr/options.js Normal file
View File

@@ -0,0 +1,56 @@
// Store CSS data in the "local" storage area.
const storage = chrome.storage.local;
// Get at the DOM controls used in the sample.
const resetButton = document.querySelector('button.reset');
const submitButton = document.querySelector('button.submit');
const textarea = document.querySelector('textarea');
// Load any CSS that may have previously been saved.
loadChanges();
submitButton.addEventListener('click', saveChanges);
resetButton.addEventListener('click', reset);
async function saveChanges() {
// Get the current CSS snippet from the form.
const cssCode = textarea.value;
// Check that there's some code there.
if (!cssCode) {
message('Error: No CSS specified');
return;
}
// Save it using the Chrome extension storage API.
await storage.set({ css: cssCode });
message('Settings saved');
}
function loadChanges() {
storage.get('css', function (items) {
// To avoid checking items.css we could specify storage.get({css: ''}) to
// return a default value of '' if there is no css value yet.
if (items.css) {
textarea.value = items.css;
message('Loaded saved CSS.');
}
});
}
async function reset() {
// Remove the saved value from storage. storage.clear would achieve the same
// thing.
await storage.remove('css');
message('Reset stored CSS');
// Refresh the text area.
textarea.value = '';
}
let messageClearTimer;
function message(msg) {
clearTimeout(messageClearTimer);
const message = document.querySelector('.message');
message.innerText = msg;
messageClearTimer = setTimeout(function () {
message.innerText = '';
}, 3000);
}

17
api-samples/storage/stylizr/popup.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Stylizr</title>
<style>
body {
font-family: sans-serif;
width: 200px;
}
</style>
</head>
<body>
<div id="message"></div>
<script src="popup.js"></script>
</body>
</html>

39
api-samples/storage/stylizr/popup.js Normal file
View File

@@ -0,0 +1,39 @@
// Store CSS data in the "local" storage area.
const storage = chrome.storage.local;
const message = document.querySelector('#message');
// Check if there is CSS specified.
async function run() {
const items = await storage.get('css');
if (items.css) {
const [currentTab] = await chrome.tabs.query({
active: true,
currentWindow: true
});
try {
await chrome.scripting.insertCSS({
css: items.css,
target: {
tabId: currentTab.id
}
});
message.innerText = 'Injected style!';
} catch (e) {
console.error(e);
message.innerText = 'Injection failed. Are you on a special page?';
}
} else {
const optionsUrl = chrome.runtime.getURL('options.html');
const optionsPageLink = document.createElement('a');
optionsPageLink.target = '_blank';
optionsPageLink.href = optionsUrl;
optionsPageLink.textContent = 'options page';
message.innerText = '';
message.appendChild(document.createTextNode('Set a style in the '));
message.appendChild(optionsPageLink);
message.appendChild(document.createTextNode(' first.'));
}
}
run();