背景
有時因為看到好看的文章或幹貨但又沒時間看完，是以想記錄下文章位址，然後有空再看。就寫了這個浏覽器插件。
實驗截圖
檔案目錄結構
gitee倉庫位址
源碼位址
浏覽器安裝插件步驟
注意：先從gitee下載下傳到本地，然後解壓使用
- 在浏覽器設定中打開擴充
- 開啟開發人員模式
- 選擇加載壓縮的擴充
- 選擇已經解壓的插件檔案夾
- 使用
自定義Edge擴充插件|文章備忘錄背景實驗截圖檔案目錄結構gitee倉庫位址浏覽器安裝插件步驟源碼
源碼
my.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="myExtension.css" />
</head>
<body>
<div id="title">
<hr>
<h3 align="center">連雨不知春去</h3>
<h3 align="center">一晴方覺夏深</h3>
<hr>
</div>
<div class="content" id="content">
<h3 align="center">添加</h3>
<input id="url" type="text" class="url" placeholder="位址">
<input id="name" type="text" class="url" placeholder="文章标題">
<br>
<button id="add" class="btn">添加</button>
<button id="deleteAll" class="btn">清空</button>
</div>
<br />
<div class="history" id="history">
<h3 align="center" id="historyTitle">曆史記錄</h3>
<hr />
<div class="historyContent" id="historyContent">
<!-- 曆史内容在這裡輸出 -->
<!-- <div class="contentUrl" id = "">
<a link="none" href="https://blog.csdn.net/Fly_as_tadpole/article/details/85787459" target="_blank" rel="external nofollow" target="_blank">Redis叢集：一緻性哈希</a>
<button class="btn" id="ok" ">删除</button>
</div> -->
</div>
</div>
<script src="myExtension.js"></script>
</body>
</html>
myExtension.js
/**
* 為<button id="add" class="btn">添加</button>添加點選事件
* 用于添加一個文章記錄
* @returns
*/
function add() {
var url = document.getElementById("url");
var name = document.getElementById("name");
if (url.value == "" || name.value == "") {
alert("位址或标題為空！")
return;
}
var article = JSON.stringify({
"url": url.value,
"name": name.value
});
//清空輸入框
clearInput();
var articles;
if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
articles = new Array();
} else {
articles = JSON.parse(localStorage.getItem("articles"));
}
//加入到隊頭
articles.unshift(article);
localStorage.setItem("articles", JSON.stringify(articles));
//重新整理頁面
showContent();
}
/**
* 用來顯示添加過的文章記錄
* 和給位址欄擷取目前位址
* 也可以手動輸入
* @returns
*/
function showHistory() {
var url = document.getElementById("url");
getCurrentUrl();
var articles;
if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
return;
} else {
articles = JSON.parse(localStorage.getItem("articles"));
}
showContent();
}
/**
* 清空所有記錄
* @returns
*/
function deleteAllUrl() {
if (confirm("确認清空嗎？")) {
if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
return;
} else {
localStorage.clear();
}
var historyContent = document.getElementById("historyContent");
historyContent.innerHTML = "";
}
}
/**
* 清空輸入框
*/
function clearInput() {
var url = document.getElementById("url");
var name = document.getElementById("name");
url.value = "";
name.value = "";
}
/**
* 擷取目前位址欄位址
*/
function getCurrentUrl() {
chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
var url = document.getElementById("url");
url.value = tabs[0].url;
});
}
/**
* 重新整理頁面作用
* 采用字元串拼接
* @returns
*/
function showContent() {
var articles;
if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
return;
} else {
articles = JSON.parse(localStorage.getItem("articles"));
}
var historyContent = document.getElementById("historyContent");
var s = "";
for (var i = 0; i < articles.length; i++) {
var json = JSON.parse(articles[i]);
var url = json.url;
var name = json.name;
s = s + "<div class=\"contentUrl\">\n" +
" <a href=\"" + url + "\" target=\"_blank\"><h3>" + name + "</h3></a>\n" +
" <button class=\"btn\" id=\"" + name + "\" id=\"" + i + "\">删除</button> </div>";
}
historyContent.innerHTML = s;
//為每個删除按鈕添加點選事件
var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
if (btns[i].id != "add" && btns[i].id != "deleteAll") {
btns[i].addEventListener("click", function () {
if (confirm("确認删除\"" + this.id + "\"嗎？")) {
deleteByName(this.id);
}
});
}
}
}
/**
* button的id也是文章的name，通過name确認是那篇文章
* @param {button的id}} Name
* @returns
*/
function deleteByName(Name) {
var articles;
if (localStorage.getItem("articles") == null || localStorage.getItem("articles") == "null") {
return;
} else {
articles = JSON.parse(localStorage.getItem("articles"));
}
var newArticles = articles.filter(e => {
var a = JSON.parse(e);
if (a.name == Name) {
return false;
}
return true;
});
localStorage.setItem("articles", JSON.stringify(newArticles));
showContent();
}
//頁面加載顯示
window.onload = showHistory;
//清空按鈕添加點選事件
var deletebtn = document.getElementById("deleteAll");
deletebtn.onclick = deleteAllUrl;
//添加按鈕添加點選事件
var addbtn = document.getElementById("add");
addbtn.onclick = add;
myExtension.css
html {
width: 300px;
height: 545px;
}
.url{
position: relative;
padding-left: 10px;
width: 43%;
border-radius: 8px;
border:1px solid #e7e7e7; color: black;
}
.btn{
position: relative;
border:1px solid #e7e7e7; color: black;;
background-color: #26b2e0;
border-radius: 8px;
}
#add{
margin-left: 36%;
}
#deleteAll{
margin-left: 40px;
}
.content{
border:1px solid #e7e7e7; color: black;
width: 97%;
height: 96px;
border-radius: 8px;
}
.history{
border:1px solid #e7e7e7; color: black;
width: 97%;
height: 345px;
border-radius: 8px;
text-align: center;
}
.contentUrl{
border:1px solid #e7e7e7; color: black;
border-radius: 8px;
width: 97%;
margin: 3px;
}
a {
text-decoration: rgba(0, 0, 0, 0.911);
}
/*正常的未被通路過的連結*/
a:link {
color: #26b2e0;
}
/*已經通路過的連結*/
a:visited {color: #26b2e0;
}
/*滑鼠劃過(停留)的連結*/
a:hover {
color: #26b2e0;
}
/* 正在點選的連結*/
a:active {
color: #26b2e0;
}
manifest.json
{
"author": "連雨不知春去",
"description": "記錄一些文章用于後面看",
"icons":
{
"48": "icons/icons1.png",
"96": "icons/icons2.png"
},
"manifest_version": 2,
"name": "連雨不知春去",
"run_at": "document_start",
"version": "1.0",
"permissions": [
"tabs"
],
"background": {
"scripts": ["myExtension.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myExtension.js"]
}
],
"browser_action": {
"default_icon": {
"30": "icons/icon3.png"
},
"default_title": "連雨不知春去",
"default_popup": "my.html"
}
}