Skip to content

Commit b20e06d

Browse files
BacooTangBacooTang
committed
feat: 新增自动高亮
1 parent db05242 commit b20e06d

4 files changed

Lines changed: 329 additions & 184 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
原项目地址 https://github.com/greycodee/flomo-code
22

3-
仅新增复制按钮
3+
feat: 仅新增复制按钮
4+
5+
feat: 新增自动高亮

‎manifest.json‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
{
2-
"name": "flomo code",
3-
"version": "1.1",
4-
"manifest_version": 3,
5-
"description": "flomo md代码块高亮插件",
6-
"action":{
7-
"default_title":"选择主题",
8-
"default_popup": "popup/popup.html"
9-
},
10-
"permissions": [
11-
"storage",
12-
"scripting",
13-
"tabs",
14-
"activeTab"
15-
],
16-
"background": {
17-
"service_worker": "service-worker.js"
18-
},
19-
"icons": {
2+
"name": "flomo code",
3+
"version": "1.1",
4+
"manifest_version": 3,
5+
"description": "flomo md代码块高亮插件",
6+
"action": {
7+
"default_title": "选择主题",
8+
"default_popup": "popup/popup.html"
9+
},
10+
"permissions": ["storage", "scripting", "tabs", "activeTab", "webRequest"],
11+
"background": {
12+
"service_worker": "service-worker.js"
13+
},
14+
"icons": {
15+
"128": "images/flomo128.png"
16+
},
2017

21-
"128": "images/flomo128.png"
22-
},
23-
24-
"web_accessible_resources": [
25-
{
26-
"resources": ["images/*"],
27-
"matches": ["https://v.flomoapp.com/*","https://flomoapp.com/*"]
28-
}
29-
],
30-
"host_permissions": [
31-
"https://v.flomoapp.com/*",
32-
"https://flomoapp.com/*"
33-
],
34-
"options_page": "options/options.html"
35-
}
18+
"web_accessible_resources": [
19+
{
20+
"resources": ["images/*"],
21+
"matches": ["https://v.flomoapp.com/*", "https://flomoapp.com/*", "https://h5.udrig.com/*"]
22+
}
23+
],
24+
"host_permissions": ["https://v.flomoapp.com/*", "https://flomoapp.com/*", "https://h5.udrig.com/*"],
25+
"options_page": "options/options.html"
26+
}

‎scripts/content.js‎

Lines changed: 114 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -24,111 +24,121 @@ window.onload = function () {
2424
hljsbtn.style.justifyContent = 'center';
2525
hljsbtn.style.alignItems = 'center';
2626

27-
hljsbtn.addEventListener('click', () => {
28-
const memos = document.getElementsByClassName('richText');
29-
const memos_array = Array.from(memos);
30-
memos_array.forEach((memo) => {
31-
let children = memo.children;
32-
const memo_p_array = Array.from(children);
33-
let languageFlag = false;
34-
let codeContentArr = [];
35-
let languageType = '';
36-
for (let i = 0; i < memo_p_array.length; i++) {
37-
if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) != '') {
38-
languageType = 'language-' + memo_p_array[i].innerHTML.substring(3);
39-
languageFlag = true;
40-
memo.removeChild(memo_p_array[i]);
41-
continue;
42-
} else if (
43-
memo_p_array[i].innerHTML.startsWith('```') &&
44-
memo_p_array[i].innerHTML.substring(3) === ''
45-
) {
46-
// memo.removeChild(memo_p_array[i]);
47-
languageFlag = false;
48-
49-
// 保存代码内容的副本用于复制功能
50-
const codeForCopy = [...codeContentArr];
51-
52-
let pre = document.createElement('pre');
53-
let code = document.createElement('code');
54-
code.innerHTML = codeContentArr.join('\n');
55-
code.className = languageType;
56-
57-
let wrapper = document.createElement('div');
58-
wrapper.style.position = 'relative';
59-
60-
// 创建复制按钮
61-
let copyBtn = document.createElement('button');
62-
copyBtn.innerHTML =
63-
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
64-
copyBtn.style.position = 'absolute';
65-
copyBtn.style.top = '5px';
66-
copyBtn.style.right = '5px';
67-
copyBtn.style.zIndex = '100';
68-
copyBtn.style.fontSize = '12px';
69-
copyBtn.style.padding = '4px';
70-
copyBtn.style.background = 'rgba(240, 240, 240, 0.8)';
71-
copyBtn.style.border = '1px solid #ccc';
72-
copyBtn.style.borderRadius = '3px';
73-
copyBtn.style.cursor = 'pointer';
74-
copyBtn.style.display = 'flex';
75-
copyBtn.style.justifyContent = 'center';
76-
copyBtn.style.alignItems = 'center';
77-
copyBtn.title = '复制代码';
78-
79-
copyBtn.addEventListener('click', function (e) {
80-
e.stopPropagation();
81-
82-
// 创建临时元素解码HTML
83-
const tempElement = document.createElement('div');
84-
85-
// 处理内容
86-
let decodedContent = [];
87-
for (let i = 0; i < codeForCopy.length; i++) {
88-
tempElement.innerHTML = codeForCopy[i];
89-
decodedContent.push(tempElement.textContent || tempElement.innerText);
90-
}
91-
92-
// 最终复制内容
93-
const codeText = decodedContent.join('\n');
94-
95-
// 复制到剪贴板
96-
navigator.clipboard
97-
.writeText(codeText)
98-
.then(() => {
99-
copyBtn.style.color = '#4CAF50';
100-
copyBtn.title = '已复制!';
101-
102-
setTimeout(() => {
103-
copyBtn.style.color = '';
104-
copyBtn.title = '复制代码';
105-
}, 1500);
106-
})
107-
.catch((err) => {
108-
console.error('复制失败:', err);
109-
});
110-
});
111-
112-
pre.appendChild(code);
113-
wrapper.appendChild(pre);
114-
wrapper.appendChild(copyBtn);
115-
116-
memo_p_array[i].innerHTML = '';
117-
memo_p_array[i].appendChild(wrapper);
118-
// memo.appendChild(pre);
119-
//清空数组
120-
codeContentArr = [];
121-
languageType = '';
122-
continue;
123-
} else {
124-
if (languageFlag) {
125-
codeContentArr.push(memo_p_array[i].innerHTML);
126-
memo.removeChild(memo_p_array[i]);
27+
hljsbtn.addEventListener('click', highlightCodeBlocks);
28+
29+
document.body.appendChild(hljsbtn);
30+
};
31+
32+
// 添加消息监听器
33+
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
34+
if (request.action === 'highlightCode') {
35+
highlightCodeBlocks();
36+
sendResponse({ status: '高亮处理完成' });
37+
}
38+
return true; // 表示会异步发送响应
39+
});
40+
41+
// 将代码高亮功能抽取为单独的函数
42+
function highlightCodeBlocks() {
43+
const memos = document.getElementsByClassName('richText');
44+
const memos_array = Array.from(memos);
45+
memos_array.forEach((memo) => {
46+
let children = memo.children;
47+
const memo_p_array = Array.from(children);
48+
let languageFlag = false;
49+
let codeContentArr = [];
50+
let languageType = '';
51+
for (let i = 0; i < memo_p_array.length; i++) {
52+
if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) != '') {
53+
languageType = 'language-' + memo_p_array[i].innerHTML.substring(3);
54+
languageFlag = true;
55+
memo.removeChild(memo_p_array[i]);
56+
continue;
57+
} else if (memo_p_array[i].innerHTML.startsWith('```') && memo_p_array[i].innerHTML.substring(3) === '') {
58+
// memo.removeChild(memo_p_array[i]);
59+
languageFlag = false;
60+
61+
// 保存代码内容的副本用于复制功能
62+
const codeForCopy = [...codeContentArr];
63+
64+
let pre = document.createElement('pre');
65+
let code = document.createElement('code');
66+
code.innerHTML = codeContentArr.join('\n');
67+
code.className = languageType;
68+
69+
let wrapper = document.createElement('div');
70+
wrapper.style.position = 'relative';
71+
72+
// 创建复制按钮
73+
let copyBtn = document.createElement('button');
74+
copyBtn.innerHTML =
75+
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
76+
copyBtn.style.position = 'absolute';
77+
copyBtn.style.top = '5px';
78+
copyBtn.style.right = '5px';
79+
copyBtn.style.zIndex = '100';
80+
copyBtn.style.fontSize = '12px';
81+
copyBtn.style.padding = '4px';
82+
copyBtn.style.background = 'rgba(240, 240, 240, 0.8)';
83+
copyBtn.style.border = '1px solid #ccc';
84+
copyBtn.style.borderRadius = '3px';
85+
copyBtn.style.cursor = 'pointer';
86+
copyBtn.style.display = 'flex';
87+
copyBtn.style.justifyContent = 'center';
88+
copyBtn.style.alignItems = 'center';
89+
copyBtn.title = '复制代码';
90+
91+
copyBtn.addEventListener('click', function (e) {
92+
e.stopPropagation();
93+
94+
// 创建临时元素解码HTML
95+
const tempElement = document.createElement('div');
96+
97+
// 处理内容
98+
let decodedContent = [];
99+
for (let i = 0; i < codeForCopy.length; i++) {
100+
tempElement.innerHTML = codeForCopy[i];
101+
decodedContent.push(tempElement.textContent || tempElement.innerText);
127102
}
103+
104+
// 最终复制内容
105+
const codeText = decodedContent.join('\n');
106+
107+
// 复制到剪贴板
108+
navigator.clipboard
109+
.writeText(codeText)
110+
.then(() => {
111+
copyBtn.style.color = '#4CAF50';
112+
copyBtn.title = '已复制!';
113+
114+
setTimeout(() => {
115+
copyBtn.style.color = '';
116+
copyBtn.title = '复制代码';
117+
}, 1500);
118+
})
119+
.catch((err) => {
120+
console.error('复制失败:', err);
121+
});
122+
});
123+
124+
pre.appendChild(code);
125+
wrapper.appendChild(pre);
126+
wrapper.appendChild(copyBtn);
127+
128+
memo_p_array[i].innerHTML = '';
129+
memo_p_array[i].appendChild(wrapper);
130+
// memo.appendChild(pre);
131+
//清空数组
132+
codeContentArr = [];
133+
languageType = '';
134+
continue;
135+
} else {
136+
if (languageFlag) {
137+
codeContentArr.push(memo_p_array[i].innerHTML);
138+
memo.removeChild(memo_p_array[i]);
128139
}
129140
}
130-
});
131-
hljs.highlightAll();
141+
}
132142
});
133-
document.body.appendChild(hljsbtn);
134-
};
143+
hljs.highlightAll();
144+
}

0 commit comments

Comments
 (0)