17 | add
18 | delete
19 |
20 | 
4 |
5 | Fully reworked to reduce memory consumption and increase performance:
6 |
7 | * inactivity timeout of the background script is configurable, so you can choose a shorter timeout to conserve memory (~30MB) or a longer timeout to conserve CPU due to a faster checking of URL regexps (from half a second right after start to just a few milliseconds in subsequent checks).
8 | * visited URL's rules are cached in IndexedDB to avoid re-checking thousands of rules
9 | * simple URL regexps are converted to the much faster literal string checks
10 | * the data is stored in IndexedDB
11 | * the content script is added to a web page only if its URL has a matching rule
12 | * the content script unregisters all of its listeners to free up memory, when there are no more pages to load or the extension is toggled off in the popup or via a hotkey
13 | * simple one-time messaging is used to avoid persisting the ports for all tabs
14 |
15 | ### Differences to the original:
16 |
17 | * Generic rules are disabled by default and can be re-enabled per site/pattern (a `*` pattern that matches all sites may be used to restore the old behavior) in the options or the popup. This is because these rules (currently there are three) seem to be useless as the popular sites all have a custom rule, while breaking the page layout on less popular sites a bit too often.
18 | * Exclusions are matched to the full URL now unless there's a `*` at the end. The original extension has been incorrectly treating all non-regexp URLs as prefixes.
19 | * `http://foo.com/bar` - this exact URL
20 | * `http://foo.com/bar*` - URLs that start with `http://foo.com/bar`
21 | * `*.foo.com/bar` - URLs that end in `foo.com/bar`
22 | * `*://*.foo.com/bar*` - URLs that contain `foo.com/bar` anywhere
23 |
24 | ### New features:
25 |
26 | * Configurable hotkeys chrome://extensions/shortcuts:
27 | * On/Off switch
28 | * Show the popup
29 | * Load 1,2,5,10 more pages - four separate commands
30 | * On/Off command in the context menu of the extension icon in the browser toolbar
31 |
32 |  
33 |
34 | ### New features in popup:
35 |
36 | * Load 1-100 more pages
37 | * Exclude current page URL/prefix/domain
38 | * Enable generic rules for current page URL/prefix/domain
39 |
40 | ### New options:
41 |
42 | * Custom rules
43 | * Ability to start the database update manually
44 | * Customizable internal parameters
45 | * Import/export
46 |
47 | ### New DOM event: `GM_AutoPagerizeNextPageDoc`
48 |
49 | Fired after downloading the new page so that other scripts may alter it like this:
50 | ```js
51 | document.addEventListener('GM_AutoPagerizeNextPageDoc', e => {
52 | const doc = e.relatedTarget;
53 | const url = doc.URL;
54 | for (const el of doc.querySelectorAll('img[alt][title]')) {
55 | el.loading = 'lazy';
56 | }
57 | });
58 | ```
59 |
60 | 
61 |
62 | ### Permissions:
63 |
64 | * `wedata.net` - used to update the database of pagination rules from http://wedata.net/databases/AutoPagerize/items_all.json which is stripped of everything except XPath selectors for the page elements and RegExp for the page URL
65 | * `
75 |
94 | excludedPages
76 |
77 |
78 |
79 |
92 |
93 | | example (singleURL): | 81 |http://www.example.com/foo |
82 |
| example (wildcard): | 85 |http://*.example.com/bar* |
86 |
| example (regexp): | 89 |/[^.]+\.example\.com\// |
90 |
98 |
101 |
121 |
122 | customRules
99 | 100 || example | |
| URL, regexp | 104 |^https://github\.com/[^/]+/[^/]+/(?:issues|pulls) |
105 |
| pageElement, XPath | 108 |//div[starts-with(@id,'issue_')] |
109 |
| nextLink, XPath | 112 |//a[@class='next_page'] |
113 |
| insertBefore, 116 | XPath 117 | | 118 |//footer optionalRare |
119 |
126 |
139 | statusStyle
127 |
128 |
132 |
136 | statusStyleInfo
137 |
138 |
143 |
150 | siteinfo
144 |
145 |
149 | size:
146 | date:
147 |
148 |
154 |
167 | 155 | import / export 156 |
157 |
158 |
159 |
160 |
165 |
166 |
170 |
171 |
172 |
173 |
174 |
--------------------------------------------------------------------------------
/ui/options.js:
--------------------------------------------------------------------------------
1 | export {
2 | collectSettings,
3 | renderSettings,
4 | };
5 |
6 | import {arrayOrDummy, DEFAULTS, loadSettings, inBG} from '/util/common.js';
7 | import {$, $$} from '/util/dom.js';
8 | import {dbExec} from '/util/storage-idb.js';
9 | import {collectRules, loadRules, resizeArea} from './options-rules.js';
10 |
11 | const ValueTransform = {
12 | // params: (value, element)
13 | render: {
14 | showStatus: v => v !== false,
15 | statusStyle: (v, el) => {
16 | const defaultValue = DEFAULTS[el._data.name];
17 | el.placeholder = defaultValue;
18 | el.closest('details').open |= Boolean(v);
19 | el.addEventListener('focusin', resizeArea);
20 | el.addEventListener('focusout', resizeArea);
21 | el.addEventListener('input', resizeArea);
22 | return v || defaultValue;
23 | },
24 | statusStyleError: (...args) => ValueTransform.render.statusStyle(...args),
25 | $array: (v, el) => {
26 | // set rows if first time init
27 | if (el._data.savedValue === undefined)
28 | el.rows = Math.max(2, Math.min(20, arrayOrDummy(v).length + 1));
29 | return arrayOrDummy(v).join('\n').trim();
30 | },
31 | $boolean: v => v === true,
32 | $any: (v, el) => String(v !== undefined ? v : DEFAULTS[el._data.name]),
33 | },
34 | // params: (element)
35 | parse: {
36 | rules: () => collectRules(),
37 | $array: el => el.value.trim().split(/\s+/),
38 | $boolean: el => el.checked,
39 | $number: el => el.valueAsNumber || DEFAULTS[el._data.name],
40 | $string: el => el.value !== DEFAULTS[el._data.name] ? el.value : '',
41 | },
42 | find: (transforms, name, defaultValue) =>
43 | transforms[name] ||
44 | transforms[`$${Array.isArray(defaultValue) ? 'array' : typeof defaultValue}`] ||
45 | transforms.$any,
46 | };
47 |
48 | const changedElements = new Set();
49 |
50 | loadSettings().then(settings => {
51 | renderSettings(settings);
52 | loadRules(settings.rules);
53 |
54 | $('#btnSave').onclick = save;
55 | $('#btnUpdate').onclick = update;
56 | $('#backup').oninput = ({target: el}) => ($('#importWrapper').disabled = !el.value.trim());
57 | addEventListener('input', onChange, {passive: true});
58 | addEventListener('change', onChange, {passive: true});
59 |
60 | Promise.all([
61 | dbExec.count(),
62 | dbExec({store: 'data'}).get('cacheDate'),
63 | ]).then(res => renderSiteinfoStats(...res));
64 | });
65 |
66 | function renderSettings(ss, {force} = {}) {
67 | for (const [k, defaultValue] of Object.entries(DEFAULTS)) {
68 | const el = document.getElementById(k);
69 | if (!el)
70 | continue;
71 | const firstInit = !el._data;
72 | // el._data.name is used when transforming so it should be defined beforehand
73 | if (firstInit)
74 | el._data = {name: k};
75 | const v = ss[k] !== undefined ? ss[k] : defaultValue;
76 | const renderedValue = ValueTransform.find(ValueTransform.render, k, defaultValue)(v, el);
77 | if (firstInit || force)
78 | el[el.type === 'checkbox' ? 'checked' : 'value'] = renderedValue;
79 | el._data.savedValue = renderedValue;
80 | }
81 | }
82 |
83 | function renderSiteinfoStats(numRules, date) {
84 | $('#size').textContent = numRules;
85 | if (!+date) date = '';
86 | const elDate = $('#date');
87 | elDate.dateTime = date;
88 | elDate.textContent = date ? renderDate(date) : 'N/A';
89 | elDate.title = date && date.toLocaleString();
90 | }
91 |
92 | function renderDate(date) {
93 | if (Intl.RelativeTimeFormat) {
94 | let delta = (date - Date.now()) / 1000;
95 | for (const [span, unit] of [
96 | [60, 'second'],
97 | [60, 'minute'],
98 | [24, 'hour'],
99 | [7, 'day'],
100 | [4, 'week'],
101 | [12, 'month'],
102 | [1e99, 'year'],
103 | ]) {
104 | if (Math.abs(delta) < span)
105 | return new Intl.RelativeTimeFormat({style: 'short'}).format(Math.round(delta), unit);
106 | delta /= span;
107 | }
108 | }
109 | return date.toLocaleString();
110 | }
111 |
112 | async function save() {
113 | const ss = collectSettings();
114 | inBG.writeSettings(ss);
115 | renderSettings(ss);
116 | changedElements.forEach(el => el.classList.remove('changed'));
117 | changedElements.clear();
118 | for (const el of $$('#rules .deleted'))
119 | el._data.savedValue = !el._data.savedValue;
120 |
121 | $('#btnSaveWrapper').hidden = true;
122 | }
123 |
124 | async function update() {
125 | const btn = $('#btnUpdate');
126 | const label = btn.textContent;
127 | btn.disabled = true;
128 |
129 | chrome.runtime.onConnect.addListener(displayProgress);
130 | const portName = performance.now() + '.' + Math.random();
131 | const numRules = await inBG.updateSiteinfo(portName);
132 | chrome.runtime.onConnect.removeListener(displayProgress);
133 |
134 | renderSiteinfoStats(numRules, numRules > 0 ? new Date() : null);
135 | btn.textContent = label;
136 | btn.disabled = false;
137 |
138 | function displayProgress(port) {
139 | if (port.name === portName)
140 | port.onMessage.addListener(loaded => {
141 | btn.textContent = (loaded / 1024).toFixed(0) + ' kiB';
142 | });
143 | }
144 | }
145 |
146 | function collectSettings() {
147 | const ss = {};
148 | for (const [k, defaultValue] of Object.entries(DEFAULTS)) {
149 | const el = document.getElementById(k);
150 | if (el)
151 | ss[k] = ValueTransform.find(ValueTransform.parse, k, defaultValue)(el);
152 | }
153 | return ss;
154 | }
155 |
156 | function onChange({target: el}) {
157 | if (el.closest('.ignore-changes'))
158 | return;
159 | const value = el[el.type === 'checkbox' ? 'checked' : 'value'];
160 | const changed = value !== el._data.savedValue;
161 | if (changed)
162 | changedElements.add(el);
163 | else
164 | changedElements.delete(el);
165 | if (changed !== el.classList.contains('changed'))
166 | el.classList.toggle('changed', changed);
167 | const unsalvageable = !changedElements.size || (el.checkValidity && !el.checkValidity());
168 | const btn = $('#btnSaveWrapper');
169 | if (btn.hidden !== unsalvageable)
170 | btn.hidden = unsalvageable;
171 | }
172 |
--------------------------------------------------------------------------------
/ui/popup-dark.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #333;
3 | color: #aaa;
4 | }
5 | a {
6 | color: skyblue;
7 | }
8 | select {
9 | color: #bbb;
10 | background-color: #222;
11 | border-color: #111;
12 | }
13 | section[data-status="true"] {
14 | background-color: seagreen;
15 | color: #fff;
16 | }
17 | section[data-status="false"] {
18 | background-color: #555;
19 | color: #fff;
20 | }
21 | section:nth-child(n + 3) {
22 | border-color: #222;
23 | }
24 | button {
25 | background: linear-gradient(-15deg, #333, #666);
26 | border: 1px solid #000;
27 | color: #eee;
28 | }
29 | #failure {
30 | color: #caa794;
31 | background-color: #f802;
32 | }
33 |
--------------------------------------------------------------------------------
/ui/popup-exclude.js:
--------------------------------------------------------------------------------
1 | export {
2 | applyPerSite,
3 | updateSpecificity,
4 | };
5 |
6 | import {arrayOrDummy, inBG, loadSettings, tabSend} from '/util/common.js';
7 | import {$, $$} from '/util/dom.js';
8 | import * as popup from './popup.js';
9 |
10 | $('#excludeSection').addEventListener('click', updateSpecificity, {once: true});
11 |
12 | async function exclude(e) {
13 | e.preventDefault();
14 |
15 | const pattern = e.target.url;
16 | await applyPerSite(pattern);
17 |
18 | let path = chrome.runtime.getManifest().action.default_popup;
19 | if (!path.startsWith('/'))
20 | path = '/' + path;
21 |
22 | for (const t of await findExcludedTabs(pattern)) {
23 | await Promise.all([
24 | inBG.setIcon({tabId: t.id, type: 'off'}),
25 | chrome.action.setPopup({tabId: t.id, popup: path}),
26 | !t.discarded && tabSend(t.id, ['run', {terminate: true}]),
27 | ]);
28 | }
29 |
30 | location.assign(path);
31 | }
32 |
33 | async function applyPerSite(pattern, listType = 'exclusions') {
34 | const list = arrayOrDummy(await loadSettings(listType));
35 | if (!list.includes(pattern)) {
36 | list.push(pattern);
37 | inBG.writeSettings({[listType]: list});
38 | }
39 | }
40 |
41 | function updateSpecificity() {
42 | const {url} = popup.tab;
43 | for (const el of $$('#specificity a')) {
44 | const {type} = el.dataset;
45 | el.title = decodeURIComponent(el.url =
46 | type === 'url' ? url :
47 | type === 'prefix' ? url + '*' :
48 | type === 'domain' ? new URL(url).origin + '/*' : ''
49 | );
50 | el.onclick = exclude;
51 | }
52 | $('#specificity').dataset.ready = '';
53 | }
54 |
55 | async function findExcludedTabs(pattern) {
56 | const isPrefix = pattern.endsWith('*');
57 | const url = isPrefix ? pattern.slice(0, -1) : pattern;
58 | // the API can't query #hash and may return tabs with a #different-hash
59 | // so we need to get all tabs with the same base URL and then filter the results
60 | const hashlessUrl = pattern.split('#', 1)[0] + (isPrefix ? '*' : '');
61 | const tabs = await chrome.tabs.query({url: hashlessUrl});
62 | return tabs.filter(t => isPrefix ? t.url.startsWith(url) : t.url === url);
63 | }
64 |
--------------------------------------------------------------------------------
/ui/popup-fail-detect.js:
--------------------------------------------------------------------------------
1 | /** Not a module to ensure it runs as early as possible */
2 | 'use strict';
3 |
4 | if (location.search) (async () => {
5 | document.documentElement.classList.add('failed-page');
6 | const [{url, id: tabId}] = await chrome.tabs.query({active: true, currentWindow: true});
7 | if (await chrome.tabs.sendMessage(tabId, ['checkOrphan'], {frameId: 0}).catch(() => 0)) {
8 | await chrome.runtime.sendMessage({action: 'reinject', data: {tabId, url}});
9 | location.search = '';
10 | }
11 | })();
12 |
--------------------------------------------------------------------------------
/ui/popup-generic-rules.js:
--------------------------------------------------------------------------------
1 | import {doDelay, ignoreLastError, RETRY_TIMEOUT} from '/util/common.js';
2 | import {$} from '/util/dom.js';
3 | import {applyPerSite, updateSpecificity} from './popup-exclude.js';
4 | import * as popup from './popup.js';
5 |
6 | $('#genericRulesSection').hidden = false;
7 | $('#genericRulesSection').addEventListener('click', async () => {
8 | const GRE = 'genericRulesEnabled';
9 | if ((await chrome.storage.sync.get(GRE))[GRE]) {
10 | $('#genericRulesSection').removeAttribute('disabled');
11 | if (!$('#specificity').dataset.ready)
12 | updateSpecificity();
13 | $('#grSlot').replaceWith(Object.assign($('#specificity').cloneNode(true), {
14 | id: '',
15 | async onclick(e) {
16 | e.preventDefault();
17 | const tabId = popup.tab.id;
18 | await applyPerSite(e.target.title, 'genericSites');
19 | chrome.tabs.reload(tabId, ignoreLastError);
20 | await waitForTabLoad(popup.tab);
21 | await doDelay(RETRY_TIMEOUT);
22 | location.search = '';
23 | },
24 | }));
25 | }
26 | }, {once: true});
27 |
28 | function waitForTabLoad(tab) {
29 | new Promise(resolve => {
30 | chrome.tabs.onUpdated.addListener(function _(tabId, info) {
31 | if (tabId === tab.id && info.status === 'complete') {
32 | chrome.tabs.onUpdated.removeListener(_);
33 | resolve();
34 | }
35 | });
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/ui/popup-load-more.js:
--------------------------------------------------------------------------------
1 | import {tabSend} from '/util/common.js';
2 | import {$, $$} from '/util/dom.js';
3 | import {i18n} from '/util/locale.js';
4 | import * as popup from './popup.js';
5 |
6 | $('#loadStop').onclick = stop;
7 | for (const el of $$('#loadMoreSection a'))
8 | el.onclick = run;
9 |
10 | inTab('query').then(num => {
11 | if (num > 0) {
12 | renderState(true);
13 | $('#loadMoreSection details').open = true;
14 | chrome.runtime.onConnect.addListener(onConnect);
15 | }
16 | });
17 |
18 | function run(e) {
19 | e.preventDefault();
20 | e.target.classList.add('done');
21 | $('#loadRemain').textContent = '';
22 | renderState(true);
23 | inTab(Number(e.target.textContent));
24 | chrome.runtime.onConnect.addListener(onConnect);
25 | }
26 |
27 | /**
28 | * @param {Event} [event] - omit it to skip executeScript when calling explicitly
29 | */
30 | function stop(event) {
31 | renderState(false);
32 | chrome.runtime.onConnect.removeListener(onConnect);
33 | if (event)
34 | inTab('stop');
35 | for (const el of $$('#loadMoreSection .done'))
36 | el.classList.remove('done');
37 | }
38 |
39 | function inTab(data) {
40 | return tabSend(popup.tab.id, ['run', {loadMore: data}]);
41 | }
42 |
43 | /** @param {chrome.runtime.Port} port */
44 | function onConnect(port) {
45 | const {name, sender} = port;
46 | let [action, num] = String(name).split(':', 2);
47 | if (action === 'pagesRemaining' &&
48 | sender && sender.tab && sender.tab.id === popup.tab.id) {
49 | port.disconnect();
50 | num = Number(num);
51 | $('#loadRemain').textContent = num ? num + '...' : i18n('done');
52 | if (!num)
53 | stop();
54 | }
55 | }
56 |
57 | function renderState(running) {
58 | $('#loadMoreSection').classList.toggle('disabled', running);
59 | }
60 |
--------------------------------------------------------------------------------
/ui/popup.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: normal 100%/1.25 sans-serif;
3 | margin: 0;
4 | }
5 | section {
6 | padding: .5rem 1rem;
7 | }
8 | section:last-child {
9 | padding-bottom: .75rem;
10 | }
11 | section:nth-child(n + 3) {
12 | border-top: 1px solid #ccc;
13 | }
14 | section[data-status] {
15 | transition: background-color .25s;
16 | }
17 | section[data-status="true"] {
18 | background-color: darkseagreen;
19 | }
20 | section[data-status="false"] {
21 | background-color: #bbb;
22 | }
23 | section[data-status="false"] label {
24 | opacity: .5;
25 | }
26 | input {
27 | vertical-align: bottom;
28 | }
29 | label,
30 | input {
31 | cursor: pointer;
32 | }
33 | select,
34 | button {
35 | height: 1.7em;
36 | }
37 | select {
38 | background-color: #eee;
39 | border-color: #ddd;
40 | }
41 | a {
42 | text-decoration: none;
43 | }
44 | a:hover {
45 | text-decoration: underline;
46 | }
47 | [nowrap] {
48 | white-space: nowrap;
49 | }
50 |
51 | #linksSection a:not(:last-child) {
52 | margin-right: 1rem;
53 | }
54 |
55 | #genericRulesSection[disabled] #grSlot::after {
56 | content: "__MSG_genericRulesEnableHint__";
57 | opacity: .5;
58 | }
59 |
60 | #loadMoreSection.disabled #loadStop {
61 | display: initial;
62 | }
63 | #loadMoreSection.disabled details > :not(#loadStop) {
64 | opacity: .5;
65 | pointer-events: none;
66 | user-select: none;
67 | }
68 | #loadRemain {
69 | font-size: smaller;
70 | }
71 |
72 | .failed-page .hide-when-failed {
73 | display: none !important;
74 | }
75 | .failed-page #failure {
76 | display: block;
77 | }
78 | #failure {
79 | padding: .5rem 1rem;
80 | font-size: smaller;
81 | background-color: moccasin;
82 | color: sienna;
83 | }
84 |
85 | summary {
86 | cursor: pointer;
87 | white-space: nowrap;
88 | }
89 | summary::-webkit-details-marker {
90 | width: .5rem;
91 | height: .5rem;
92 | margin: 0 .25rem;
93 | }
94 | details ul {
95 | font-size: smaller;
96 | margin: 0 0 0 1rem;
97 | padding: 0;
98 | }
99 | details li {
100 | margin: 0 0 0 .5rem;
101 | }
102 | details a {
103 | display: block;
104 | padding: 2px 0 2px 1.25rem;
105 | margin-left: -1.5rem;
106 | text-decoration: none;
107 | user-select: none;
108 | }
109 | details a:hover {
110 | text-decoration: underline;
111 | background-color: #8882;
112 | }
113 | details .done {
114 | color: darkgreen;
115 | }
116 | .full-width {
117 | padding-left: 0;
118 | }
119 | .full-width details {
120 | padding-left: 1rem;
121 | }
122 | .full-width summary {
123 | margin-left: -1rem;
124 | margin-right: -.5rem;
125 | }
126 | .full-width details ul {
127 | margin-left: 0;
128 | margin-right: -1rem;
129 | }
130 |
--------------------------------------------------------------------------------
/ui/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
52 |
55 |