Skip to content

Commit

Permalink
Add options: custom width, always show buttons (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
fregante committed Mar 19, 2023
1 parent 5efb97b commit b2f6724
Show file tree
Hide file tree
Showing 12 changed files with 531 additions and 25 deletions.
297 changes: 286 additions & 11 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"prettier"
],
"rules": {
"unicorn/prefer-top-level-await": "off",
"no-new": "off",
"no-bitwise": "off"
},
Expand All @@ -49,6 +50,7 @@
"extends": "stylelint-config-xo"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-node-resolve": "^15.0.1",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
Expand Down Expand Up @@ -77,6 +79,8 @@
}
},
"dependencies": {
"webext-base-css": "^1.4.3",
"webext-options-sync": "^4.0.1",
"webext-polyfill-kinda": "^1.0.0"
}
}
14 changes: 9 additions & 5 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
## <img src="source/logo.png" width="30" align="left"> One Click Extension Manager

<img src="screencast.gif" align="right" alt="">

## <img src="source/logo.png" width="30" align="left"> One Click Extension Manager
<!-- Text wrap helper; Without this, the text can be squished in 40px next to the image -->

A simple Chrome extension to manage your Chrome extensions.
![](https://user-images.githubusercontent.com/1402241/226161439-960aebe9-cad1-4d4d-a59a-f007db2abfa3.png)

A _very simple_ Chrome extension to manage your Chrome extensions.

It only requires the `management` permission.

## Install

[link-chrome]: https://chrome.google.com/webstore/detail/one-click-extension-manag/pbgjpgbpljobkekbhnnmlikbbfhbhmem 'Version published on Chrome Web Store'
[link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/npm-hub/ 'Version published on Mozilla Add-ons'
[link-safari]: https://apps.apple.com/app/npmhub/id1542090429 'Version published on the Mac App Store'
[link-edge]: https://microsoftedge.microsoft.com/addons/detail/one-click-extensions-mana/jdodenbllldnoogfmbmmgpieafbnaogm 'Version published on Edge Web Stroe'

[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg" width="48" alt="Chrome" valign="middle">][link-chrome] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/pbgjpgbpljobkekbhnnmlikbbfhbhmem.svg?label=%20">][link-chrome]
[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg" width="48" alt="Chrome" valign="middle">][link-chrome] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/pbgjpgbpljobkekbhnnmlikbbfhbhmem.svg?label=%20">][link-chrome] and other Chromium browsers

[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/edge/edge.svg" width="48" alt="Edge" valign="middle">][link-edge] [<img valign="middle" src="https://img.shields.io/badge/dynamic/json?add-on&prefix=v&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Fjdodenbllldnoogfmbmmgpieafbnaogm&label=%20">][link-edge]

[<img src="https://raw.githubusercontent.com/iamcal/emoji-data/08ec822c38e0b7a6fea0b92a9c42e02b6ba24a84/img-apple-160/1f99a.png" width="48" valign="middle">](https://github.com/sponsors/fregante) _If you like this extension, consider [sponsoring or hiring](https://github.com/sponsors/fregante) the maintainer [@fregante](https://twitter.com/fregante)_

## Internationalization

It's available in 12 languages:
Expand Down
9 changes: 7 additions & 2 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy-glob';
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
Expand All @@ -6,10 +7,13 @@ import livereload from 'rollup-plugin-livereload';
const production = !process.env.ROLLUP_WATCH;

const config = {
input: 'source/main.js',
input: {
main: 'source/main.js',
'options/options': 'source/options/options.js',
},
output: {
sourcemap: !production,
format: 'iife',
format: 'es',
dir: 'distribution',
},
plugins: [
Expand All @@ -19,6 +23,7 @@ const config = {
dev: !production,
},
}),
commonjs(),
resolve({
browser: true,
dedupe: ['svelte'],
Expand Down
16 changes: 13 additions & 3 deletions source/App.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script>
import optionsStorage from './options-storage.js';
import {onMount} from 'svelte';
import chromeP from 'webext-polyfill-kinda';
import Extension from './Extension.svelte';
Expand All @@ -13,11 +14,20 @@
let extensions = [];
let searchValue = '';
// Show all buttons when it's not in a popup #32
let showExtras =
new URLSearchParams(window.location.search).get('type') !== 'popup';
const options = optionsStorage.getAll();
let showExtras = false;
let showInfoMessage = !localStorage.getItem('undo-info-message');
options.then(({showButtons, width}) => {
if (showButtons === 'always') {
showExtras = true;
}
if (width.trim()) {
const cleanWidth = /[a-z]/i.test(width) ? width : width.trim() + 'px';
document.body.style.width = cleanWidth;
}
});
$: {
const keywords = searchValue
.toLowerCase()
Expand Down
2 changes: 1 addition & 1 deletion source/Extension.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
{/if}
{#if showExtras}
{#if url}
<a href={url} title={getI18N('openUrl')} target="_blank">
<a href={url} title={getI18N('openUrl')} target="_blank" rel="noreferrer">
<img src="icons/globe.svg" alt="" />
</a>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion source/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<title>Extension Manager</title>
<link href="style.css" rel="stylesheet" />
<script defer src="main.js"></script>
<script type="module" src="main.js"></script>
4 changes: 2 additions & 2 deletions source/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"manifest_version": 3,
"homepage_url": "https://github.com/hankxdev/one-click-extensions-manager",
"default_locale": "en",
"permissions": ["management"],
"permissions": ["management", "storage"],
"minimum_chrome_version": "110",
"icons": {
"16": "logo.png",
Expand All @@ -16,7 +16,7 @@
"default_popup": "index.html?type=popup"
},
"options_ui": {
"page": "index.html"
"page": "options/options.html"
},
"commands": {
"_execute_action": {}
Expand Down
10 changes: 10 additions & 0 deletions source/options-storage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import OptionsSync from 'webext-options-sync';

const optionsStorage = new OptionsSync({
defaults: {
showButtons: 'on-demand', // Or 'always'
width: '',
},
});

export default optionsStorage;
58 changes: 58 additions & 0 deletions source/options/options.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<meta charset="UTF-8" />
<title>One Click Extension Manager options</title>
<style>
@import './webext-base.css';
input[type='text'] {
border: solid 1px;
border-radius: 2px;
}
label {
display: block;
}
#width {
width: 5em;
}
ul {
padding-left: 1em;
}
</style>
<form id="options-form">
<p>
<label for="showButtons">Show buttons</label>
<select name="showButtons" id="showButtons">
<option value="on-demand">On demand (default)</option>
<option value="always">Always</option>
</select>
</p>
<p>
<label for="width"
>List width <small>(CSS value or leave empty)</small></label
>
<input type="text" name="width" id="width" placeholder="400px" />
</p>
</form>
<hr />
<p>
If you find this useful, consider supporting its development by donating or
leaving a review.
</p>
<ul>
<li>
<a
href="https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf/reviews"
>Reviews</a
>
</li>
<li><a href="https://github.com/sponsors/fregante">Donations</a></li>
<li>
<a href="https://github.com/hankxdev/one-click-extensions-manager"
>Open source on GitHub</a
>
</li>
</ul>
<p>
Made by <a href="https://fregante.com">fregante</a> 🇮🇹 and
<a href="https://momane.com/">Hank Yang</a> 🇨🇳
</p>
<script type="module" src="options.js"></script>
3 changes: 3 additions & 0 deletions source/options/options.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import optionsStorage from '../options-storage.js';

optionsStorage.syncForm(document.querySelector('form'));
137 changes: 137 additions & 0 deletions source/options/webext-base.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/* Vendored until a better build is added */

/*! https://npm.im/webext-base-css */

/* Firefox only: @-moz-document */
/* Firefox only: var(--in-content-*) */
/* Chrome only: -webkit-hyphens */
/* Safari only: _::-webkit-full-page-media */

/* webpackIgnore: true */
@import url('chrome://global/skin/in-content/common.css')
(min--moz-device-pixel-ratio: 0); /* Firefox-only */

:root {
--background-color-for-chrome: #292a2d;
max-width: 700px;
margin: auto;
}

body {
--body-margin-h: 8px;
margin-left: var(--body-margin-h);
margin-right: var(--body-margin-h);
}

/* Selector matches Firefox’ */
input[type='number'],
input[type='password'],
input[type='search'],
input[type='text'],
input[type='url'],
input:not([type]),
textarea {
display: block;
box-sizing: border-box;
margin-left: 0;
width: 100%;
resize: vertical;
-moz-tab-size: 4 !important;
tab-size: 4 !important;
}

input[type='checkbox'] {
vertical-align: -0.15em;
}

@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) and
(list-style-type: '*') {
textarea:focus {
/* Inexplicably missing from Chrome’s input style https://github.com/chromium/chromium/blob/6bea0557fe/extensions/renderer/resources/extension.css#L287 */
border-color: #4d90fe;
transition: border-color 200ms;
}
}

hr {
margin-right: calc(-1 * var(--body-margin-h));
margin-left: calc(-1 * var(--body-margin-h));
border: none;
border-bottom: 1px solid #aaa4;
}

img {
vertical-align: middle;
}

_::-webkit-full-page-media,
_:future,
:root {
font-family: -apple-system, BlinkMacSystemFont, sans-serif,
'Apple Color Emoji';
}

_::-webkit-full-page-media,
_:future,
input[type='number'],
input[type='password'],
input[type='search'],
input[type='text'],
input[type='url'],
input:not([type]),
textarea {
border: solid 1px #888;
padding: 0.4em;
font: inherit;
-webkit-appearance: none;
}

@-moz-document url-prefix('') {
:root, /* Visible on a options_page */
body {
--body-margin-h: 6px; /* Must be a variable so <hr>’s margin is changed too */ /* Visible on a options_page and options_ui */
color: var(--in-content-page-color);

/* Also supports dark themes in Firefox */
/* !important is to override the dark-mode setting for Chrome below */
background-color: var(--in-content-box-background) !important;
min-height: 250px; /* Without this there’s a white space at the bottom in dark mode */
}

body > * {
margin-left: var(--body-margin-h);
margin-right: var(--body-margin-h);
}

input[type='checkbox'] {
vertical-align: -0.4em;
}
}

@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
background-color: var(--background-color-for-chrome);
}

body,
h3 {
/* Chrome #3 */
color: var(--in-content-page-color, #e8eaed);
}

a {
color: var(--in-content-link-color, #8ab4f8);
}

input[type='number'],
input[type='password'],
input[type='search'],
input[type='text'],
input[type='url'],
input:not([type]),
textarea {
color: inherit;
background-color: transparent;
}
}

0 comments on commit b2f6724

Please sign in to comment.