自定义Edge扩展插件|文章备忘录

最新推荐文章于 2024-02-16 20:12:28 发布

细雨生寒未有霜

最新推荐文章于 2024-02-16 20:12:28 发布

阅读量1.7k

点赞数 3

分类专栏：工具文章标签： html css js edge

本文链接：https://blog.csdn.net/huiguifuhuo/article/details/119103832

版权

工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景

有时因为看到好看的文章或干货但又没时间看完，所以想记录下文章地址，然后有空再看。就写了这个浏览器插件。

实验截图

实验步骤

文件目录结构

gitee仓库地址

源码地址

浏览器安装插件步骤

注意：先从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">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"
    }
  }

细雨生寒未有霜

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
自定义Edge扩展插件|文章备忘录

背景有时因为看到好看的文章或干货但又没时间看完，所以想记录下文章地址，然后有空再看。就写了这个浏览器插件。实验截图文件目录结构gitee仓库地址源码地址浏览器安装插件步骤在浏览器设置中打开扩展开启开发人员模式选择加载压缩的扩展选择已经解压的插件文件夹使用源码my.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <link rel
复制链接

扫一扫