mirror of
https://github.com/bellingcat/auto-archiver-extension.git
synced 2026-06-12 21:48:34 +03:00
Initial commit
This commit is contained in:
Miguel Sozinho Ramalho
2
source/background.js
Normal file
2
source/background.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// eslint-disable-next-line import/no-unassigned-import
|
||||
import './options-storage.js';
|
||||
8
source/content.css
Normal file
8
source/content.css
Normal file
@@ -0,0 +1,8 @@
|
||||
#text-notice {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
z-index: 999999;
|
||||
}
|
||||
16
source/content.js
Normal file
16
source/content.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import optionsStorage from './options-storage.js';
|
||||
|
||||
console.log('💈 Content script loaded for', chrome.runtime.getManifest().name);
|
||||
async function init() {
|
||||
const options = await optionsStorage.getAll();
|
||||
const color = 'rgb(' + options.colorRed + ', ' + options.colorGreen + ',' + options.colorBlue + ')';
|
||||
const text = options.text;
|
||||
const notice = document.createElement('div');
|
||||
notice.innerHTML = text;
|
||||
document.body.prepend(notice);
|
||||
notice.id = 'text-notice';
|
||||
notice.style.border = '2px solid ' + color;
|
||||
notice.style.color = color;
|
||||
}
|
||||
|
||||
init();
|
||||
BIN
source/icon.png
Normal file
BIN
source/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
39
source/manifest.json
Normal file
39
source/manifest.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "Awesome Extension",
|
||||
"version": "0.0.0",
|
||||
"description": "An awesome new browser extension",
|
||||
"homepage_url": "https://github.com/fregante/browser-extension-template",
|
||||
"manifest_version": 3,
|
||||
"minimum_chrome_version": "100",
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "awesome-extension@notlmn.github.io",
|
||||
"strict_min_version": "100.0"
|
||||
}
|
||||
},
|
||||
"icons": {
|
||||
"128": "icon.png"
|
||||
},
|
||||
"permissions": [
|
||||
"storage"
|
||||
],
|
||||
"host_permissions": [
|
||||
"https://github.com/*"
|
||||
],
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": [ "https://github.com/fregante/browser-extension-template/*" ],
|
||||
"js": [ "content.js" ],
|
||||
"css": [ "content.css" ],
|
||||
"run_at": "document_end"
|
||||
}
|
||||
],
|
||||
"options_ui": {
|
||||
"browser_style": true,
|
||||
"page": "options.html"
|
||||
},
|
||||
"background": {
|
||||
"service_worker": "background.js",
|
||||
"type": "module"
|
||||
}
|
||||
}
|
||||
14
source/options-storage.js
Normal file
14
source/options-storage.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import OptionsSync from 'webext-options-sync';
|
||||
|
||||
export default new OptionsSync({
|
||||
defaults: {
|
||||
colorRed: 244,
|
||||
colorGreen: 67,
|
||||
colorBlue: 54,
|
||||
text: 'Set a text!',
|
||||
},
|
||||
migrations: [
|
||||
OptionsSync.migrations.removeUnused,
|
||||
],
|
||||
logging: true,
|
||||
});
|
||||
65
source/options.css
Normal file
65
source/options.css
Normal file
@@ -0,0 +1,65 @@
|
||||
html {
|
||||
min-width: 550px;
|
||||
overflow-x: hidden; /* Required to hide horizontal scroll on Firefox */
|
||||
}
|
||||
|
||||
/* For use with screen readers */
|
||||
.sr-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide spinbox for number inputs */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type='number'],
|
||||
input[type='text'] {
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-inputs {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-input input[type='range'] {
|
||||
flex: 1;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.color-input input[type='number'] {
|
||||
width: calc(3ch + 1rem);
|
||||
}
|
||||
|
||||
.color-output {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Firefox only */
|
||||
.only-firefox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix('') {
|
||||
.only-firefox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
36
source/options.html
Normal file
36
source/options.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Options</title>
|
||||
|
||||
<form id="options-form" class="detail-view-container">
|
||||
<h3>Color Picker</h3>
|
||||
<div class="color-picker">
|
||||
<div class="color-inputs">
|
||||
<label class="color-input">
|
||||
<span>R</span>
|
||||
<input type="range" min="0" max="255" name="colorRed">
|
||||
<input type="number" name="colorRed" min="0" max="255">
|
||||
</label>
|
||||
<label class="color-input">
|
||||
<span>G</span>
|
||||
<input type="range" min="0" max="255" name="colorGreen">
|
||||
<input type="number" name="colorGreen" min="0" max="255">
|
||||
</label>
|
||||
<label class="color-input">
|
||||
<span>B</span>
|
||||
<input type="range" min="0" max="255" name="colorBlue">
|
||||
<input type="number" name="colorBlue" min="0" max="255">
|
||||
</label>
|
||||
</div>
|
||||
<div class="color-output"></div>
|
||||
</div>
|
||||
<h3>Notice Content</h3>
|
||||
<div class="text-inputs">
|
||||
<label class="text-input">
|
||||
<span>Text</span>
|
||||
<input type="text" name="text">
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="options.js" type="module"></script>
|
||||
29
source/options.js
Normal file
29
source/options.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// eslint-disable-next-line import/no-unassigned-import
|
||||
import 'webext-base-css';
|
||||
import './options.css';
|
||||
|
||||
import optionsStorage from './options-storage.js';
|
||||
|
||||
const rangeInputs = [...document.querySelectorAll('input[type="range"][name^="color"]')];
|
||||
const numberInputs = [...document.querySelectorAll('input[type="number"][name^="color"]')];
|
||||
const output = document.querySelector('.color-output');
|
||||
|
||||
function updateOutputColor() {
|
||||
output.style.backgroundColor = `rgb(${rangeInputs[0].value}, ${rangeInputs[1].value}, ${rangeInputs[2].value})`;
|
||||
}
|
||||
|
||||
function updateInputField(event) {
|
||||
numberInputs[rangeInputs.indexOf(event.currentTarget)].value = event.currentTarget.value;
|
||||
}
|
||||
|
||||
for (const input of rangeInputs) {
|
||||
input.addEventListener('input', updateOutputColor);
|
||||
input.addEventListener('input', updateInputField);
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await optionsStorage.syncForm('#options-form');
|
||||
updateOutputColor();
|
||||
}
|
||||
|
||||
init();
|
||||
Reference in New Issue
Block a user