Skip to content

Commit bde9b08

Browse files
gordonpedgordonped
committed
Added options section
includes functionality to add front and back-matter, with replaceable template parts, including current date (courtesy of moment.js)
1 parent befdc9c commit bde9b08

File tree

6 files changed

+423
-55
lines changed

6 files changed

+423
-55
lines changed

‎background/background.js

+68-17
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,74 @@ function createReadableVersion(dom) {
88
return article;
99
}
1010

11+
// these are the default options
12+
const defaultOptions = {
13+
headingStyle: "setext",
14+
hr: "***",
15+
bulletListMarker: "*",
16+
codeBlockStyle: "indented",
17+
fence: "```",
18+
emDelimiter: "_",
19+
strongDelimiter: "**",
20+
linkStyle: "inlined",
21+
linkReferenceStyle: "full",
22+
frontmatter: "{baseURI}\n\n> {excerpt}\n\n# {title}",
23+
backmatter: ""
24+
}
25+
1126
// convert the article content to markdown using Turndown
12-
function convertArticleToMarkdown(article) {
13-
var turndownService = new TurndownService();
14-
var markdown = turndownService.turndown(article.content);
15-
16-
//add article title as header
17-
markdown = "# " + article.title + "\n" + markdown;
18-
19-
//add summary if exist
20-
if (article.excerpt != null) {
21-
markdown = "> " + article.excerpt + "\n\n" + markdown;
27+
function convertArticleToMarkdownForReal(content, options) {
28+
var turndownService = new TurndownService(options);
29+
var markdown = options.frontmatter + '\n' + turndownService.turndown(content)
30+
+ '\n' + options.backmatter;
31+
return markdown;
32+
}
33+
34+
function textReplace(string, article, dom) {
35+
for (const key in article) {
36+
if (article.hasOwnProperty(key) && key != "content") {
37+
string = string.split('{' + key + '}').join(article[key]);
38+
}
2239
}
2340

24-
return markdown;
41+
string = string.replace("{baseURI}", dom.baseURI);
42+
43+
// replace date formats
44+
const now = new Date();
45+
const dateRegex = /{date:(.+?)}/g
46+
const matches = string.match(dateRegex);
47+
if (matches && matches.forEach) {
48+
matches.forEach(match => {
49+
const format = match.substring(6, match.length - 1);
50+
const dateString = moment(now).format(format);
51+
string = string.replace(match, dateString);
52+
});
53+
}
54+
55+
return string;
56+
}
57+
58+
function convertArticleToMarkdown(article, dom) {
59+
60+
const optionsLoaded = options => {
61+
let testOptions = {
62+
...options,
63+
frontmatter: textReplace(options.frontmatter, article, dom),
64+
backmatter: textReplace(options.backmatter, article, dom),
65+
}
66+
return convertArticleToMarkdownForReal(article.content, testOptions);
67+
}
68+
69+
const onError = error => {
70+
console.log(error);
71+
return convertArticleToMarkdownForReal(article.content, {
72+
...defaultOptions,
73+
frontmatter: textReplace(defaultOptions.frontmatter, article, dom),
74+
backmatter: textReplace(defaultOptions.backmatter, article, dom),
75+
});
76+
}
77+
78+
return browser.storage.sync.get(defaultOptions).then(optionsLoaded, onError);
2579
}
2680

2781
// function to turn the title into a valid file name
@@ -71,13 +125,10 @@ function notify(message) {
71125

72126
// make markdown document from the dom
73127
var article = createReadableVersion(dom);
74-
var markdown = convertArticleToMarkdown(article);
75-
76-
// add url to the top of the markdown
77-
markdown = dom.baseURI + "\n\n" + markdown;
78-
128+
convertArticleToMarkdown(article, dom).then(markdown =>
79129
// send a message to display the markdown
80-
browser.runtime.sendMessage({ type: "display.md", markdown: markdown, article: article });
130+
browser.runtime.sendMessage({ type: "display.md", markdown: markdown, article: article })
131+
);
81132
}
82133
// message for triggering download
83134
else if (message.type == "download") {

‎background/moment.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manifest.json

+48-38
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,51 @@
11
{
2-
3-
"manifest_version": 2,
4-
"name": "MarkDownload - Markdown Web Clipper",
2+
"manifest_version": 2,
3+
"name": "MarkDownload - Markdown Web Clipper",
54
"version": "2.1.6",
6-
"author": "Enrico Kaack/Gordon Pedsersen",
7-
8-
"description": "This extension works like a web clipper, but it downloads articles in a markdown format using Turndown and Readability.js.",
9-
10-
"icons": {
11-
"16": "icons/favicon-16x16.png",
12-
"32": "icons/favicon-32x32.png",
13-
"48": "icons/favicon-48x48.png",
14-
"128": "icons/appicon-128x128.png",
15-
"192": "icons/favicon-192x192.png",
16-
"512": "icons/favicon-512x512.png"
17-
},
18-
19-
"permissions": [
20-
"activeTab",
21-
"tabs",
22-
"downloads"
23-
],
24-
25-
"browser_action": {
26-
27-
"default_title": "MarkDownload",
28-
"default_popup": "popup/clipSite.html",
29-
"default_icon": {
30-
"16": "icons/favicon-16x16.png",
31-
"32": "icons/favicon-32x32.png",
32-
"48": "icons/favicon-48x48.png",
33-
"128": "icons/appicon-128x128.png"
34-
}
35-
},
36-
37-
"background": {
38-
"scripts": ["browser-polyfill.min.js", "background/turndown.js", "/background/Readability.js", "background/background.js"]
5+
"author": "Enrico Kaack/Gordon Pedsersen",
6+
"description": "This extension works like a web clipper, but it downloads articles in a markdown format using Turndown and Readability.js.",
7+
"icons": {
8+
"16": "icons/favicon-16x16.png",
9+
"32": "icons/favicon-32x32.png",
10+
"48": "icons/favicon-48x48.png",
11+
"128": "icons/appicon-128x128.png",
12+
"192": "icons/favicon-192x192.png",
13+
"512": "icons/favicon-512x512.png"
14+
},
15+
"permissions": [
16+
"activeTab",
17+
"tabs",
18+
"downloads",
19+
"storage"
20+
],
21+
"browser_action": {
22+
"default_title": "MarkDownload",
23+
"default_popup": "popup/clipSite.html",
24+
"default_icon": {
25+
"16": "icons/favicon-16x16.png",
26+
"32": "icons/favicon-32x32.png",
27+
"48": "icons/favicon-48x48.png",
28+
"128": "icons/appicon-128x128.png"
3929
}
40-
41-
}
30+
},
31+
"background": {
32+
"scripts": [
33+
"browser-polyfill.min.js",
34+
"background/moment.min.js",
35+
"background/turndown.js",
36+
"/background/Readability.js",
37+
"background/background.js"
38+
]
39+
},
40+
"options_ui": {
41+
"page": "options/options.html",
42+
"browser_style": false,
43+
"chrome_style": false,
44+
"open_in_tab": false
45+
},
46+
"browser_specific_settings": {
47+
"gecko": {
48+
"id": "{1c5e4c6f-5530-49a3-b216-31ce7d744db0}"
49+
}
50+
}
51+
}

‎options/options.css

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
body {
2+
margin: auto;
3+
padding: 8px;
4+
font-size: 16px;
5+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6+
}
7+
8+
pre, code {
9+
background-color: lightgray;
10+
padding: 0.5em;
11+
}
12+
13+
code {
14+
padding-top: 0.2em;
15+
padding-bottom: 0.2em;
16+
display: inline-block;
17+
}
18+
19+
.textarea {
20+
width: calc(100% - 16px);
21+
display: block;
22+
overflow: hidden;
23+
resize: both;
24+
min-height: 40px;
25+
border: 1px solid #ccc;
26+
font-family: inherit;
27+
font-size: inherit;
28+
padding: 1px 6px;
29+
font-family: monospace;
30+
}
31+
32+
.save {
33+
display:block;
34+
width:100%;
35+
padding: 1em 0;
36+
margin: 0;
37+
background-color: #222288;
38+
color: #ffffff;
39+
text-align: center;
40+
text-decoration: none;
41+
line-height: 1em;
42+
border:none;
43+
}
44+
45+
.status {
46+
display:block;
47+
width: 100%;
48+
padding: 1em 0;
49+
margin: 0.5em 0;
50+
text-align: center;
51+
text-decoration: none;
52+
line-height: 1em;
53+
background-color: transparent;
54+
}
55+
.status.success{
56+
background-color: #d4edda;
57+
color:#155724;
58+
}
59+
.status.error{
60+
background-color: #f8d7da;
61+
color:#721c24;
62+
}

‎options/options.html

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>MarkDownload Options</title>
7+
<link rel="stylesheet" type="text/css" href="options.css" media="screen">
8+
</head>
9+
10+
<body>
11+
<h2>Custom text</h2>
12+
<small>For the front- and back-matter custom text, you can use the following text replacement values.
13+
Please note that not all websites will provide all values
14+
<ul>
15+
<li><code>{title}</code> - Article Title</li>
16+
<li><code>{length}</code> - Length of the article, in characters</li>
17+
<li><code>{excerpt}</code> - Article description or short excerpt from the content</li>
18+
<li><code>{byline}</code> - Author metadata</li>
19+
<li><code>{dir}</code> - Content direction</li>
20+
<li><code>{baseURI}</code> - The url of the article</li>
21+
<li><code>{date:FORMAT}</code> - The current date and time. Check the <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank" rel="noopener noreferrer">format reference</a> </li>
22+
</ul>
23+
</small>
24+
25+
<h3>Front-matter template</h3>
26+
<label for="frontmatter">Enter the text here that should appear at the top of the output file.</label>
27+
<span id="frontmatter" class="textarea" role="textbox" contenteditable></span>
28+
29+
<h3>Back-matter template</h3>
30+
<label for="backmatter">Enter the text here that should appear at the bottom of the output file.</label>
31+
<span id="backmatter" class="textarea" role="textbox" contenteditable></span>
32+
33+
<div class="status"></div>
34+
<button class="save">Save</button>
35+
36+
<h2>Markdown conversion options</h2>
37+
38+
<h3>Heading Style</h3>
39+
<input type="radio" name="headingStyle" id="setext" value="setext" />
40+
<label for="setext">Setext-Style Headers
41+
<pre>All About Dogs
42+
==============</pre>
43+
</label>
44+
<input type="radio" name="headingStyle" id="atx" value="atx" />
45+
<label for="atx">Atx-Style Headers
46+
<pre># All About Dogs</pre>
47+
</label>
48+
49+
<h3>Horizontal Rule style</h3>
50+
<input type="radio" name="hr" id="***" value="***" />
51+
<label for="***"><code>***</code></label>
52+
<input type="radio" name="hr" id="---" value="---" />
53+
<label for="---"><code>---</code></label>
54+
<input type="radio" name="hr" id="___" value="___" />
55+
<label for="___"><code>___</code></label>
56+
57+
<h3>Bullet List Marker</h3>
58+
<input type="radio" name="bulletListMarker" id="*" value="*" />
59+
<label for="*"><code>*</code></label>
60+
<input type="radio" name="bulletListMarker" id="-" value="-" />
61+
<label for="-"><code>-</code></label>
62+
<input type="radio" name="bulletListMarker" id="+" value="+" />
63+
<label for="+"><code>+</code></label>
64+
65+
<h3>Code Block Style</h3>
66+
<input type="radio" name="codeBlockStyle" id="indented" value="indented" />
67+
<label for="indented">Intented
68+
<pre> const helloWorld = () => {
69+
console.log("Hello World");
70+
}</pre>
71+
</label>
72+
<input type="radio" name="codeBlockStyle" id="fenced" value="fenced" />
73+
<label for="fenced">Fenced
74+
<pre>```
75+
const helloWorld = () => {
76+
console.log("Hello World");
77+
}
78+
```</pre>
79+
</label>
80+
81+
<h3>Code Block Fence</h3>
82+
<input type="radio" name="fence" id="```" value="```" />
83+
<label for="```"><code>```</code></label>
84+
<input type="radio" name="fence" id="~~~" value="~~~" />
85+
<label for="~~~"><code>~~~</code></label>
86+
87+
<h3>Emphesis (italics) Delimiter</h3>
88+
<input type="radio" name="emDelimiter" id="_" value="_" />
89+
<label for="_"><code>_italics_</code></label>
90+
<input type="radio" name="emDelimiter" id="*" value="*" />
91+
<label for="*"><code>*italics*</code></label>
92+
93+
<h3>Strong (bold) Delimiter</h3>
94+
<input type="radio" name="strongDelimiter" id="**" value="**" />
95+
<label for="**"><code>**bold**</code></label>
96+
<input type="radio" name="strongDelimiter" id="__" value="__" />
97+
<label for="__"><code>__bold__</code></label>
98+
99+
<h3>Link Style</h3>
100+
<input type="radio" name="linkStyle" id="inlined" value="inlined" />
101+
<label for="inlined">Inlined
102+
<pre>[Google](http://google.com)</pre>
103+
</label>
104+
<input type="radio" name="linkStyle" id="referenced" value="referenced" />
105+
<label for="referenced">Referenced
106+
<pre>[Google]
107+
108+
[Google]: http://google.com</pre>
109+
</label>
110+
111+
<h3>Link Reference Style</h3>
112+
<input type="radio" name="linkReferenceStyle" id="full" value="full" />
113+
<label for="full">Full</label>
114+
<input type="radio" name="linkReferenceStyle" id="collapsed" value="collapsed" />
115+
<label for="collapsed">Collapsed</label>
116+
<input type="radio" name="linkReferenceStyle" id="shortcut" value="shortcut" />
117+
<label for="shortcut">Shortcut</label>
118+
119+
<div class="status"></div>
120+
<button class="save">Save</button>
121+
122+
<script src="../browser-polyfill.min.js"></script>
123+
<script src="options.js"></script>
124+
</body>
125+
126+
</html>

0 commit comments

Comments
 (0)