背景
有时因为看到好看的文章或干货但又没时间看完，所以想记录下文章地址，然后有空再看。就写了这个浏览器插件。
实验截图
文件目录结构
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"
}
}