Update
This commit is contained in:
parent
4e3550cf03
commit
49542b58e5
3
assets/icons/close_big.svg
Normal file
3
assets/icons/close_big.svg
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z" fill="#2E3A59"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 240 B |
|
@ -3,10 +3,10 @@
|
||||||
"name": "Problematyczne requesty",
|
"name": "Problematyczne requesty",
|
||||||
"version": "1.0",
|
"version": "1.0",
|
||||||
|
|
||||||
"description": "Adds a red border to all webpages matching mozilla.org.",
|
"description": "",
|
||||||
|
|
||||||
"sidebar_action": {
|
"sidebar_action": {
|
||||||
"default_title": "ICD Skaner",
|
"default_title": "ICD",
|
||||||
"default_panel": "sidebar/sidebar.html",
|
"default_panel": "sidebar/sidebar.html",
|
||||||
"default_icon": "sidebar_icon.png"
|
"default_icon": "sidebar_icon.png"
|
||||||
},
|
},
|
||||||
|
|
30
options.scss
Normal file
30
options.scss
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
@import './sidebar/colors.scss';
|
||||||
|
|
||||||
|
.options-container {
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
span {
|
||||||
|
color: $mid-grey;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
|
||||||
|
.label-checkbox {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container{
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#minValueLength {
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
136
options.tsx
136
options.tsx
|
@ -1,50 +1,96 @@
|
||||||
import React from "react";
|
import React from 'react';
|
||||||
|
import './options.scss';
|
||||||
|
|
||||||
export default function Options({
|
export default function Options({
|
||||||
minValueLength,
|
minValueLength,
|
||||||
setMinValueLength,
|
setMinValueLength,
|
||||||
cookiesOnly,
|
cookiesOnly,
|
||||||
setCookiesOnly,
|
setCookiesOnly,
|
||||||
cookiesOrOriginOnly,
|
cookiesOrOriginOnly,
|
||||||
setCookiesOrOriginOnly,
|
setCookiesOrOriginOnly,
|
||||||
|
readWarningDataDialog,
|
||||||
|
setReadWarningDataDialog,
|
||||||
}: {
|
}: {
|
||||||
minValueLength: number;
|
minValueLength: number;
|
||||||
setMinValueLength: (n: number) => void;
|
setMinValueLength: (n: number) => void;
|
||||||
cookiesOnly: boolean;
|
cookiesOnly: boolean;
|
||||||
setCookiesOnly: (b: boolean) => void;
|
setCookiesOnly: (b: boolean) => void;
|
||||||
cookiesOrOriginOnly: boolean;
|
cookiesOrOriginOnly: boolean;
|
||||||
setCookiesOrOriginOnly: (b: boolean) => void;
|
setCookiesOrOriginOnly: (b: boolean) => void;
|
||||||
|
readWarningDataDialog: string;
|
||||||
|
setReadWarningDataDialog: (s: string) => void;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<fieldset>
|
<div className="options-container">
|
||||||
<h3>Zaawansowane ustawienia 💛</h3>
|
<span>Ustawienia interfejsu</span>
|
||||||
<label htmlFor="minValueLength">
|
<fieldset>
|
||||||
Pokazuj tylko wartości o długości co najmniej{" "}
|
<div className="input-container">
|
||||||
</label>
|
<input
|
||||||
<input
|
type="checkbox"
|
||||||
type="number"
|
id="readWarningDataDialog"
|
||||||
id="minValueLength"
|
checked={readWarningDataDialog != '1'}
|
||||||
value={minValueLength}
|
onChange={(e) => {
|
||||||
onChange={(e) => setMinValueLength(parseInt(e.target.value))}
|
setReadWarningDataDialog(
|
||||||
/>
|
e.target.checked ? '0' : '1'
|
||||||
<br />
|
);
|
||||||
<input
|
localStorage.setItem(
|
||||||
type="checkbox"
|
'readWarningDataDialog',
|
||||||
id="cookiesOnly"
|
e.target.checked ? '0' : '1'
|
||||||
checked={cookiesOnly}
|
);
|
||||||
onChange={(e) => setCookiesOnly(e.target.checked)}
|
}}
|
||||||
/>
|
/>
|
||||||
<label htmlFor="cookiesOnly">Pokazuj tylko dane z cookiesów</label>
|
<label
|
||||||
<br />
|
className="label-checkbox"
|
||||||
<input
|
htmlFor="readWarningDataDialog"
|
||||||
type="checkbox"
|
>
|
||||||
id="cookiesOrOriginOnly"
|
Wyświetlaj informację o pozyskiwanych danych
|
||||||
checked={cookiesOrOriginOnly}
|
</label>
|
||||||
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
|
</div>
|
||||||
/>
|
</fieldset>
|
||||||
<label htmlFor="cookiesOrOriginOnly">
|
<span>Ustawienia zaawansowane</span>
|
||||||
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
|
<fieldset>
|
||||||
</label>
|
<div className="input-container">
|
||||||
</fieldset>
|
<label htmlFor="minValueLength">
|
||||||
);
|
Pokazuj tylko wartości o długości co najmniej{' '}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="minValueLength"
|
||||||
|
value={minValueLength}
|
||||||
|
onChange={(e) =>
|
||||||
|
setMinValueLength(parseInt(e.target.value))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="input-container">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="cookiesOnly"
|
||||||
|
checked={cookiesOnly}
|
||||||
|
onChange={(e) => setCookiesOnly(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<label className="label-checkbox" htmlFor="cookiesOnly">
|
||||||
|
Pokazuj tylko dane z cookiesów
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="input-container">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="cookiesOrOriginOnly"
|
||||||
|
checked={cookiesOrOriginOnly}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCookiesOrOriginOnly(e.target.checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="label-checkbox"
|
||||||
|
htmlFor="cookiesOrOriginOnly"
|
||||||
|
>
|
||||||
|
Pokazuj tylko dane z cookiesów lub z częścią historii
|
||||||
|
przeglądania
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,3 +3,5 @@ $disabled-grey: #8a949f;
|
||||||
$light-grey: #d1d1d1;
|
$light-grey: #d1d1d1;
|
||||||
$blue: #0048D9;
|
$blue: #0048D9;
|
||||||
$icd-yellow: #ffee2c;
|
$icd-yellow: #ffee2c;
|
||||||
|
$pale-yellow: #fff8e5;
|
||||||
|
$contrast-yellow: #ffb900;
|
||||||
|
|
|
@ -79,4 +79,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warning-container {
|
||||||
|
background-color: $pale-yellow;
|
||||||
|
border-left: 4px solid $contrast-yellow;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: calc(100% - 2rem) 2rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
justify-content: flex-end;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $mid-grey;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0.5rem 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@ import SettingsIcon from '../assets/icons/settings.svg';
|
||||||
import TrashIcon from '../assets/icons/trash_full.svg';
|
import TrashIcon from '../assets/icons/trash_full.svg';
|
||||||
import MailIcon from '../assets/icons/mail.svg';
|
import MailIcon from '../assets/icons/mail.svg';
|
||||||
import ShortLeftIcon from '../assets/icons/short_left.svg';
|
import ShortLeftIcon from '../assets/icons/short_left.svg';
|
||||||
|
import CloseBigIcon from '../assets/icons/close_big.svg';
|
||||||
|
|
||||||
async function getCurrentTab() {
|
async function getCurrentTab() {
|
||||||
const [tab] = await browser.tabs.query({
|
const [tab] = await browser.tabs.query({
|
||||||
|
@ -30,6 +31,9 @@ const Sidebar = () => {
|
||||||
useState<boolean>(false);
|
useState<boolean>(false);
|
||||||
const [counter, setCounter] = useEmitter(getMemory());
|
const [counter, setCounter] = useEmitter(getMemory());
|
||||||
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
|
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
|
||||||
|
const [readWarningDataDialog, setReadWarningDataDialog] = useState<
|
||||||
|
string | null
|
||||||
|
>(localStorage.getItem('readWarningDataDialog'));
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const listener = async (data: any) => {
|
const listener = async (data: any) => {
|
||||||
|
@ -91,18 +95,15 @@ const Sidebar = () => {
|
||||||
)}
|
)}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav>
|
{stolenDataView ? (
|
||||||
{stolenDataView ? (
|
<nav>
|
||||||
<Fragment>
|
<button onClick={() => setStolenDataView(!stolenDataView)}>
|
||||||
<button
|
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||||
onClick={() => setStolenDataView(!stolenDataView)}
|
*/}
|
||||||
>
|
<SettingsIcon width={20} height={20} />
|
||||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
<span>Ustawienia wtyczki</span>
|
||||||
*/}
|
</button>
|
||||||
<SettingsIcon width={20} height={20} />
|
{/* <button
|
||||||
<span>Ustawienia wtyczki</span>
|
|
||||||
</button>
|
|
||||||
{/* <button
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
getMemory().removeCookiesFor(
|
getMemory().removeCookiesFor(
|
||||||
origin,
|
origin,
|
||||||
|
@ -114,57 +115,80 @@ const Sidebar = () => {
|
||||||
<TrashIcon />
|
<TrashIcon />
|
||||||
<span>Wyczyść ciasteczka first-party</span>
|
<span>Wyczyść ciasteczka first-party</span>
|
||||||
</button> */}
|
</button> */}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
getMemory().removeRequestsFor(origin);
|
getMemory().removeRequestsFor(origin);
|
||||||
setCounter((c) => c + 1);
|
setCounter((c) => c + 1);
|
||||||
setMarksOccurrence(false);
|
setMarksOccurrence(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* {stolenDataView ? 'Options' : 'Data'}
|
{/* {stolenDataView ? 'Options' : 'Data'}
|
||||||
*/}
|
*/}
|
||||||
<TrashIcon width={20} height={20} />
|
<TrashIcon width={20} height={20} />
|
||||||
<span>Wyczyść ciasteczka</span>
|
<span>Wyczyść ciasteczka</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
disabled={!marksOccurrence}
|
disabled={!marksOccurrence}
|
||||||
title={
|
title={
|
||||||
marksOccurrence
|
marksOccurrence
|
||||||
? 'Kliknij, aby wygenerować wiadomość'
|
? 'Kliknij, aby wygenerować wiadomość'
|
||||||
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
|
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
|
||||||
}
|
}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const params = [
|
const params = [
|
||||||
'height=' + screen.height,
|
'height=' + screen.height,
|
||||||
'width=' + screen.width,
|
'width=' + screen.width,
|
||||||
'fullscreen=yes',
|
'fullscreen=yes',
|
||||||
].join(',');
|
].join(',');
|
||||||
window.open(
|
window.open(
|
||||||
`/report-window/report-window.html?origin=${origin}`,
|
`/report-window/report-window.html?origin=${origin}`,
|
||||||
'new_window',
|
'new_window',
|
||||||
params
|
params
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MailIcon width={20} height={20} />
|
<MailIcon width={20} height={20} />
|
||||||
<span>
|
<span>
|
||||||
Utwórz wiadomość dla administratora tej witryny
|
Utwórz wiadomość dla administratora tej witryny
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</Fragment>
|
</nav>
|
||||||
) : null}
|
) : null}
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
{stolenDataView ? (
|
{stolenDataView ? (
|
||||||
<StolenData
|
<Fragment>
|
||||||
origin={origin}
|
{readWarningDataDialog != '1' ? (
|
||||||
refreshToken={counter}
|
<section className="warning-container">
|
||||||
refresh={() => setCounter((c) => c + 1)}
|
<span>
|
||||||
minValueLength={minValueLength}
|
<strong>Uwaga!</strong> Niekoniecznie każda
|
||||||
cookiesOnly={cookiesOnly}
|
przechwycona poniżej informacja jest daną
|
||||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
osobową. Niektóre z podanych domen mogą
|
||||||
/>
|
należeć do właściciela strony i nie
|
||||||
|
reprezentować podmiotów trzecich.
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setReadWarningDataDialog('1');
|
||||||
|
localStorage.setItem(
|
||||||
|
'readWarningDataDialog',
|
||||||
|
'1'
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseBigIcon width={16} height={16} />
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
) : null}
|
||||||
|
<StolenData
|
||||||
|
origin={origin}
|
||||||
|
refreshToken={counter}
|
||||||
|
refresh={() => setCounter((c) => c + 1)}
|
||||||
|
minValueLength={minValueLength}
|
||||||
|
cookiesOnly={cookiesOnly}
|
||||||
|
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||||
|
/>
|
||||||
|
</Fragment>
|
||||||
) : (
|
) : (
|
||||||
<Options
|
<Options
|
||||||
minValueLength={minValueLength}
|
minValueLength={minValueLength}
|
||||||
|
@ -173,6 +197,8 @@ const Sidebar = () => {
|
||||||
setCookiesOnly={setCookiesOnly}
|
setCookiesOnly={setCookiesOnly}
|
||||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||||
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
||||||
|
readWarningDataDialog={readWarningDataDialog}
|
||||||
|
setReadWarningDataDialog={setReadWarningDataDialog}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -83,7 +83,7 @@ export function StolenData({
|
||||||
Zaznacz automatycznie
|
Zaznacz automatycznie
|
||||||
</button> */}
|
</button> */}
|
||||||
|
|
||||||
<span>Domeny, które pozyskały informacje</span>
|
<span>Domeny oraz przesłane informacje</span>
|
||||||
|
|
||||||
{clusters.map((cluster) => {
|
{clusters.map((cluster) => {
|
||||||
return (
|
return (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user