",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/rhysd/monolith-of-web/issues"
24 | },
25 | "homepage": "https://github.com/rhysd/monolith-of-web#readme",
26 | "devDependencies": {
27 | "@types/chrome": "0.0.91",
28 | "@types/copy-webpack-plugin": "^5.0.0",
29 | "@types/sanitize-filename": "^1.6.3",
30 | "@types/webpack": "^4.41.2",
31 | "@types/webpack-dev-server": "^3.9.0",
32 | "@typescript-eslint/eslint-plugin": "^2.16.0",
33 | "@typescript-eslint/parser": "^2.16.0",
34 | "copy-webpack-plugin": "^5.1.1",
35 | "eslint": "^6.8.0",
36 | "eslint-config-prettier": "^6.9.0",
37 | "eslint-plugin-prettier": "^3.1.2",
38 | "npm-run-all": "^4.1.5",
39 | "prettier": "^1.19.1",
40 | "ts-loader": "^6.2.1",
41 | "ts-node": "^8.6.2",
42 | "tsconfig-paths": "^3.9.0",
43 | "typescript": "^3.7.5",
44 | "webpack": "^4.41.5",
45 | "webpack-cli": "^3.3.12",
46 | "webpack-dev-server": "^4.11.1"
47 | },
48 | "dependencies": {
49 | "@mdi/font": "^4.8.95",
50 | "balloon-css": "^1.0.4",
51 | "bulma": "^0.8.0",
52 | "monolith": "file:./monolith",
53 | "sanitize-filename": "^1.6.3"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Monolith of Web
10 |
11 |
12 |
13 |
19 |
20 |
24 |
25 |
26 |
27 |
28 |
34 |
35 |
36 |
42 |
43 |
44 |
50 |
51 |
52 |
58 |
59 |
60 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/background.ts:
--------------------------------------------------------------------------------
1 | import { monolithOfHtml, MonolithOptions } from 'monolith';
2 | import sanitizeFileName from 'sanitize-filename';
3 |
4 | declare global {
5 | interface Window {
6 | wasmLoadedInBackground?: boolean;
7 | }
8 | }
9 |
10 | const ANY_ORIGIN_PERMISSIONS = { permissions: [], origins: ['http://*/*', 'https://*/*'] };
11 |
12 | function downloadURL(fileName: string, url: string) {
13 | const a = document.createElement('a');
14 | a.download = fileName;
15 | a.href = url;
16 | a.click();
17 | }
18 |
19 | function requestAnyOriginAccess() {
20 | return new Promise(resolve => {
21 | chrome.permissions.request(ANY_ORIGIN_PERMISSIONS, resolve);
22 | });
23 | }
24 |
25 | function revokeAnyOriginAccess() {
26 | return new Promise(resolve => {
27 | chrome.permissions.remove(ANY_ORIGIN_PERMISSIONS, resolve);
28 | });
29 | }
30 |
31 | async function download(msg: MessageCreateMonolith) {
32 | const granted = msg.cors && (await requestAnyOriginAccess());
33 | console.log('Permissions for CORS request granted:', granted);
34 |
35 | const c = msg.config;
36 | console.log('Start monolith for', msg.url, 'with', c);
37 |
38 | const opts = MonolithOptions.new();
39 | if (c.noJs) {
40 | opts.noJs(true);
41 | }
42 | if (c.noCss) {
43 | opts.noCss(true);
44 | }
45 | if (c.noIFrames) {
46 | opts.noFrames(true);
47 | }
48 | if (c.noImages) {
49 | opts.noImages(true);
50 | }
51 |
52 | const html = await monolithOfHtml(msg.html, msg.url, opts);
53 | const data = new Blob([html], { type: 'text/html' });
54 | const obj = URL.createObjectURL(data);
55 |
56 | try {
57 | const file = `${sanitizeFileName(msg.title) || 'index'}.html`;
58 | downloadURL(file, obj);
59 | } finally {
60 | URL.revokeObjectURL(obj);
61 | if (granted) {
62 | const revoked = await revokeAnyOriginAccess();
63 | console.log('Permissions for CORS request revoked:', revoked);
64 | }
65 | }
66 | }
67 |
68 | chrome.runtime.onMessage.addListener(async (msg: Message) => {
69 | switch (msg.type) {
70 | case 'bg:start':
71 | try {
72 | await download(msg);
73 | chrome.runtime.sendMessage({ type: 'popup:complete' });
74 | } catch (err) {
75 | chrome.runtime.sendMessage({
76 | type: 'popup:error',
77 | name: err.name || 'Error',
78 | message: err.message,
79 | });
80 | }
81 | break;
82 | default:
83 | break;
84 | }
85 | });
86 |
87 | window.wasmLoadedInBackground = true;
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 'Monolith of Web': Chrome Extension Port of [Monolith][1]
2 | =========================================================
3 |
4 | ['Monolith of Web'][6] is a Chrome extension ported from CLI tool [Monolith][1]. Monolith is a CLI tool to
5 | download a web page as static single HTML file. 'Monolith of Web' provides the same functionality as
6 | a browser extension by compiling Monolith (written in Rust) into WebAssembly.
7 |
8 | 
9 |
10 | ## Installation
11 |
12 | - Install from [Chrome Web Store][7]
13 | - Download `.crx` file from [releases page][5] and install it manually
14 |
15 | ## Usage
16 |
17 | 
18 |
19 | 1. Go to a web page you want to store
20 | 2. Click 'Monolith of Web' icon in a browser bar (above popup window will open)
21 | 3. Click 'Get Monolith' button
22 | 4. Wait for the process completing
23 | 5. The generated single static HTML file is stored in your downloads folder
24 |
25 | By toggling icons at bottom of the popup window, you can determine to or not to include followings
26 | in the generated HTML file.
27 |
28 | - JavaScript
29 | - CSS
30 | - ``
31 | - Images
32 |
33 | The button at right-bottom toggles if allow CORS request or not. Please read following 'Permissions'
34 | section and 'CORS Requests in Background Page' section for more details.
35 |
36 | ## Permissions
37 |
38 | - **Required permissions**
39 | - `activeTab`: This extension gets an HTML text and a page title from the active tab to generate a monolith
40 | - `storage`: This extension remembers the last state of toggle buttons at bottom in the popup window.
41 | - **Optional permissions**
42 | - `http://*/*` and `https://*/*`: Allow any cross-origin requests in background page. This is runtime
43 | permission so this extension does not require by default. **Only when you see a broken HTML file is
44 | generated due to CORS error in background page, please enable this option.** The reason of these
45 | permissions are explained in next 'CORS Requests in Background Page' section.
46 |
47 | ## CORS Requests in Background Page
48 |
49 | This extension generates a single HTML file in background page of Chrome extension. Since CSP in a
50 | content script is not applied in a background page, some resources in content's HTML cannot be fetched
51 | in background page.
52 |
53 | By default, this extension ignores CORS errors in background page. It is usually not a problem since
54 | resources protected by CSP are usually scripts which don't affect main content. But a broken single HTML
55 | page may be generated due to CORS errors.
56 |
57 | When you see a broken page due to the CORS error in background page, please enable 'allow CORS requests'
58 | button at right-bottom in the popup window. Permission dialog will appear to require permissions for
59 | sending CORS requests in background page. After accepting it, CORS request error is disabled and all
60 | resources should be fetched with no error.
61 |
62 | After generating a single HTML file with the runtime permissions, this extension will remove the permissions
63 | as soon as possible for security.
64 |
65 | ## Development
66 |
67 | WebAssembly port of Monolith is developed in [the forked repository][4]. Currently it has some differences
68 | and duplicates against the original repository. reqwest did not support Wasm before 0.10.0 so my Wasm
69 | port does not use it and uses `fetch()` directly via `js_sys` and `web_sys` crate.
70 |
71 | This repository adds the forked Monolith repository as a Git submodule and uses it by bundling sources
72 | with Webpack.
73 |
74 | ## Contributing
75 |
76 | ### Creating an issue
77 |
78 | Before reporting an issue, please try the same URL with [CLI version][1]. If it is reproducible with
79 | CLI version, please report it to the CLI repository at first.
80 |
81 | If it is not reproducible with CLI version (it means the issue only occurs with this extension), please
82 | report it from [issues page][8].
83 |
84 | ### Improve Wasm part
85 |
86 | This repository only includes TypeScript part of extension. Wasm part is developed in
87 | [forked monolith repository][4]. If your improvement can be applied to [upstream][1], please make a
88 | pull request in the upstream at first. After the pull request is merged, please make an issue to
89 | request to merge upstream at this repository or the forked repository.
90 |
91 | ## License
92 |
93 | Distributed under [the MIT license](LICENSE).
94 |
95 |
96 | [1]: https://github.com/Y2Z/monolith
97 | [3]: https://chrome.google.com/webstore/detail/koalogomkahjlabefiglodpnhhkokekg
98 | [4]: https://github.com/rhysd/monolith
99 | [5]: https://github.com/rhysd/monolith-of-web/releases
100 | [6]: https://github.com/rhysd/monolith-of-web
101 | [7]: https://chrome.google.com/webstore/detail/monolith/koalogomkahjlabefiglodpnhhkokekg
102 | [8]: https://github.com/rhysd/monolith-of-web/issues
103 |
--------------------------------------------------------------------------------
/popup.ts:
--------------------------------------------------------------------------------
1 | import { loadFromStorage, storeToStorage, Storage, DEFAULT_STORAGE } from './storage';
2 |
3 | type GetButtonState = 'normal' | 'loading' | 'success';
4 | class GetButton {
5 | private state: GetButtonState;
6 |
7 | constructor(private elem: HTMLButtonElement) {
8 | this.elem = elem;
9 | this.state = 'normal';
10 | }
11 |
12 | clear() {
13 | this.elem.classList.remove('is-loading', 'is-success');
14 | this.elem.classList.add('is-dark');
15 | this.setText('Get Monolith', 'arrow-down-bold-box');
16 | this.state = 'normal';
17 | }
18 |
19 | startLoading() {
20 | if (this.state !== 'normal') {
21 | this.clear();
22 | }
23 | this.elem.classList.add('is-loading');
24 | this.state = 'loading';
25 | }
26 |
27 | success() {
28 | this.elem.classList.remove('is-dark', 'is-loading');
29 | this.elem.classList.add('is-success');
30 | this.setText('Success!', 'check-bold');
31 | this.state = 'success';
32 |
33 | setTimeout(() => {
34 | if (this.state === 'success') {
35 | this.clear();
36 | }
37 | }, 2000);
38 | }
39 |
40 | onClick(cb: () => void) {
41 | this.elem.addEventListener('click', cb, { passive: true });
42 | }
43 |
44 | private setText(label: string, iconName: string) {
45 | this.elem.innerHTML = '';
46 |
47 | const icon = document.createElement('span');
48 | icon.className = 'icon';
49 | const check = document.createElement('i');
50 | check.className = `mdi mdi-${iconName}`;
51 | icon.appendChild(check);
52 | this.elem.appendChild(icon);
53 |
54 | const text = document.createElement('span');
55 | text.innerText = label;
56 | this.elem.appendChild(text);
57 | }
58 | }
59 |
60 | class ErrorMessage {
61 | constructor(
62 | private readonly container: HTMLElement,
63 | private readonly title: HTMLElement,
64 | private readonly body: HTMLElement,
65 | closeBtn: HTMLButtonElement,
66 | ) {
67 | this.close = this.close.bind(this);
68 | closeBtn.addEventListener('click', this.close, { passive: true });
69 | }
70 |
71 | show(title: string, message: string) {
72 | this.title.innerText = title;
73 | this.body.innerText = message;
74 | this.container.style.display = 'block';
75 | }
76 |
77 | close() {
78 | this.container.style.display = '';
79 | }
80 | }
81 |
82 | const COLOR_DISABLED = 'has-text-grey-light';
83 | class ConfigButton {
84 | constructor(private readonly elem: HTMLElement) {
85 | elem.addEventListener('click', this.toggle.bind(this), { passive: true });
86 | }
87 |
88 | toggle() {
89 | this.set(!this.enabled());
90 | }
91 |
92 | set(enabled: boolean) {
93 | console.log('set!', enabled);
94 | if (enabled) {
95 | this.elem.classList.remove(COLOR_DISABLED);
96 | } else {
97 | this.elem.classList.add(COLOR_DISABLED);
98 | }
99 | }
100 |
101 | enabled() {
102 | return !this.elem.classList.contains(COLOR_DISABLED);
103 | }
104 | }
105 |
106 | const errorMessage = new ErrorMessage(
107 | document.getElementById('error-message') as HTMLElement,
108 | document.getElementById('error-title') as HTMLElement,
109 | document.getElementById('error-body') as HTMLElement,
110 | document.getElementById('error-close') as HTMLButtonElement,
111 | );
112 | const getButton = new GetButton(document.getElementById('get-monolith-btn') as HTMLButtonElement);
113 | const configButtons = {
114 | noJs: new ConfigButton(document.getElementById('config-js') as HTMLElement),
115 | noCss: new ConfigButton(document.getElementById('config-css') as HTMLElement),
116 | noIFrames: new ConfigButton(document.getElementById('config-iframes') as HTMLElement),
117 | noImages: new ConfigButton(document.getElementById('config-images') as HTMLElement),
118 | allowCors: new ConfigButton(document.getElementById('config-allow-cors') as HTMLElement),
119 | };
120 |
121 | getButton.onClick(() => {
122 | getButton.startLoading();
123 | chrome.tabs.executeScript({ file: 'content.js' });
124 | });
125 |
126 | type BackgroundWindow = Window & {
127 | wasmLoadedInBackground?: boolean;
128 | };
129 |
130 | function pollBackgroundWindowLoaded() {
131 | return new Promise(resolve => {
132 | chrome.runtime.getBackgroundPage(w => {
133 | resolve(!!(w as BackgroundWindow).wasmLoadedInBackground);
134 | });
135 | });
136 | }
137 |
138 | function sleep(ms: number) {
139 | return new Promise(resolve => setTimeout(resolve, ms));
140 | }
141 |
142 | async function waitForBackgroundPageLoaded() {
143 | // Retry for 12 * 250 = 3 seconds
144 | const retries = 12;
145 | const interval = 250;
146 | for (let c = 0; c < retries; ++c) {
147 | if (await pollBackgroundWindowLoaded()) {
148 | return;
149 | }
150 | await sleep(interval);
151 | }
152 | throw new Error(
153 | `No background page is open nor no background script was loaded successfully after ${retries / 4} seconds`,
154 | );
155 | }
156 |
157 | async function startMonolith(msg: MessageMonolithContent) {
158 | const config = {
159 | noJs: !configButtons.noJs.enabled(),
160 | noCss: !configButtons.noCss.enabled(),
161 | noIFrames: !configButtons.noIFrames.enabled(),
162 | noImages: !configButtons.noImages.enabled(),
163 | };
164 | const cors = configButtons.allowCors.enabled();
165 |
166 | const startMsg: MessageToBackground = {
167 | ...msg,
168 | type: 'bg:start',
169 | config,
170 | cors,
171 | };
172 |
173 | // Note: Retry is necessary since background page might not be fully opened yet.
174 | // In the case, popup page must wait for the background page being loaded.
175 | // When loading the background page, background.js loads Wasm file asynchronously.
176 | // We need to wait for the page being fully loaded. Otherwise, the callback to
177 | // receive bg:start is not set yet.
178 | await waitForBackgroundPageLoaded();
179 |
180 | // Note: Getting the background window object by chrome.runtime.getBackgroundPage()
181 | // and call its method does not work. While executing JavaScript in background from
182 | // popup window, chrome.permissions.request() does not work. It just fires its callback
183 | // without requesting any permissions.
184 | chrome.runtime.sendMessage(startMsg);
185 |
186 | await storeToStorage(config, cors);
187 | }
188 |
189 | chrome.runtime.onMessage.addListener(async (msg: Message) => {
190 | if (!msg.type.startsWith('popup:')) {
191 | return;
192 | }
193 |
194 | switch (msg.type) {
195 | case 'popup:content':
196 | await startMonolith(msg);
197 | break;
198 | case 'popup:complete':
199 | getButton.success();
200 | break;
201 | case 'popup:error':
202 | getButton.clear();
203 | errorMessage.show(msg.name || 'ERROR', msg.message);
204 | break;
205 | default:
206 | console.error('Unexpected message:', msg);
207 | break;
208 | }
209 | });
210 |
211 | async function setupConfigButtons() {
212 | let storage: Storage;
213 | try {
214 | storage = await loadFromStorage();
215 | } catch (err) {
216 | storage = DEFAULT_STORAGE;
217 | }
218 |
219 | const { config, cors } = storage;
220 | configButtons.noJs.set(!config.noJs);
221 | configButtons.noCss.set(!config.noCss);
222 | configButtons.noIFrames.set(!config.noIFrames);
223 | configButtons.noImages.set(!config.noImages);
224 | configButtons.allowCors.set(cors);
225 | }
226 |
227 | setupConfigButtons().catch(err => console.error('Could not set config buttons:', err));
228 |
--------------------------------------------------------------------------------