Add a content script to insert the import button into the share page.

This commit is contained in:
Bauke 2022-11-23 14:14:17 +01:00
parent 87e4a28315
commit dbff19e2b9
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
3 changed files with 132 additions and 0 deletions

View File

@ -0,0 +1,104 @@
import './style.scss';
import browser from 'webextension-polyfill';
import {Component, render} from 'preact';
import {html} from 'htm/preact';
import {decodeBase64, fragmentPrefix} from '../../utilities/share-redirect.js';
import {
RedirectParameters,
parseRedirect,
narrowMatcherType,
narrowRedirectType,
} from '../../redirect/exports.js';
import storage from '../../redirect/storage.js';
type Props = Record<string, unknown>;
type State = {
error: string | undefined;
imported: boolean;
};
class ImportButton extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
error: undefined,
imported: false,
};
}
importRedirect = async () => {
const decoded = decodeBase64<RedirectParameters>(
location.hash.slice(fragmentPrefix.length),
);
const invalidRedirectError = "This isn't a valid redirect. ☹️";
if (
!narrowMatcherType(decoded.matcherType) ||
!narrowRedirectType(decoded.redirectType) ||
typeof decoded.matcherValue !== 'string' ||
typeof decoded.redirectValue !== 'string'
) {
this.setState({error: invalidRedirectError});
return;
}
const redirect = parseRedirect({
id: -1,
enabled: true,
matcherType: decoded.matcherType,
matcherValue: decoded.matcherValue,
redirectType: decoded.redirectType,
redirectValue: decoded.redirectValue,
});
if (redirect === undefined) {
this.setState({error: invalidRedirectError});
return;
}
const id = await storage.nextRedirectId();
redirect.parameters.id = id;
await storage.save(redirect);
this.setState({imported: true});
};
render() {
const {error, imported} = this.state;
if (error !== undefined) {
return html`<p>${error}</p>`;
}
if (imported) {
return html`
<p class="import-success">The redirect has been imported!</p>
`;
}
return html`
<button class="import-button" onClick=${this.importRedirect}>
Import
</button>
`;
}
}
function main() {
if (!location.hash.startsWith(fragmentPrefix)) {
return;
}
const importRoot = document.querySelector('.re-nav-import')!;
for (const child of Array.from(importRoot.children)) {
child.remove();
}
render(html`<${ImportButton} />`, importRoot);
}
main();

View File

@ -0,0 +1,20 @@
.re-nav-import {
text-align: center;
}
.import-button {
background-color: var(--da-4);
border: none;
color: var(--background-1);
cursor: pointer;
font-weight: bold;
padding: var(--spacing-08) var(--spacing-32);
&:hover {
background-color: var(--foreground-1);
}
}
.import-success {
margin-bottom: var(--spacing-16);
}

View File

@ -21,6 +21,14 @@ export default function createManifest(
}, },
}, },
}, },
content_scripts: [
{
css: ['generated:content-scripts/share/style.css'],
js: ['content-scripts/share/share.ts'],
matches: ['https://holllo.org/re-nav/share/'],
run_at: 'document_end',
},
],
}; };
const icons = { const icons = {