插件废土课:打造属于你的“智能笔记”!

亲爱的网页冲浪者们,抓紧浮板,我们要继续在Chrome插件的海浪上翻滚啦!上次我们玩了个小把戏,搞了个显示时间的Hello World插件,这次我们要把游戏玩大,准备打造一个能让你在网页上乱涂乱画的"智能笔记"插件。想象一下,在你那些最爱的网页上留下你智慧的印记,然后下次回来,它们还在那儿等着你,是不是很酷?

这个高级玩意儿将会有这么几个花样:

  1. 右键菜单 ------ 右击来一发,随时加笔记。
  2. 内容脚本 ------ 选中文字就像选中你的小心心。
  3. 页面涂鸦 ------ 在网页上留下你的痕迹,就像海边留下足迹。
  4. 存储回忆 ------ 用Chrome存储API记下你的点点滴滴,想看就看。
  5. 弹出界面 ------ 一个小窗口让你管理你的秘密笔记。
  6. 后台大脑 ------ 管理全局思维,说不定还能把你的笔记传到Google Drive云端呢。

开篇

本章我们要聊聊后台脚本(Service Worker),这玩意儿就像插件的幕后英雄,默默无闻地听着浏览器的耳语,比如插件安装或更新的小秘密。

先来揭秘后台脚本的神秘面纱:

在Chrome插件世界里,后台脚本就是那个不怎么爱出风头的重要角色。它在后台默默工作,监听各种事件,保持插件的全局和谐,有时候还得干干定时任务之类的活儿。虽然它不和用户直接亲密接触,但它是连接内容脚本、弹出页面、选项页面等的大管家。

好了,下面我们开个小差,看看怎么设置这个后台大脑吧。

manifest.json:

首先,咱们得确保manifest.json文件里,后台脚本声明得漂亮:

json 复制代码
{
  "manifest_version": 3,
  "name": "智能笔记",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "48": "icon.png"
  }
}

这段代码就像是一张插件的身份证,告诉你它叫"智能笔记",1.0版,用background.js当自己的大脑,还声明了它需要的权限和它那帅气的小图标。

background.js:

接着,敲出你的background.js,赋予它聪明的大脑,让它能聆听浏览器的细语:

javascript 复制代码
// 监听扩展安装事件
chrome.runtime.onInstalled.addListener(function(details) {
    if (details.reason === "install") {
        console.log("感谢您安装智能笔记插件!");
        // 这里可以做一些插件安装后的庆祝活动
    } else if (details.reason === "update") {
        console.log("智能笔记插件已经升级到最新版!");
        // 可以处理一下升级后的事宜
    }
});

在background.js里,咱们用addListener方法给chrome.runtime.onInstalled事件加了个监听器,根据插件是被安装还是更新,我们在控制台放了几句好话。真实场景中,你可能得在这时候做一些初始化的动作,比如跳个小舞什么的。

你知道吗,开发Chrome扩展时,我们会总是重新加载插件测试新招数。onInstalled事件就像是一个试衣间,每次你装上新衣服或者搭配新配饰时,它都会告诉你,看起来怎么样。

所以,这个onInstalled事件能帮你搞定这几件事:

● 设定基本配置,比如创建存储数据的房间。

● 迁移旧数据,如果插件更新了,得把旧衣服换成新的。

● 给用户展示最新的通知或引导页面,尤其是当你加入了一些新花样时。

当用户装上了你的扩展,然后你又推出新版本,onInstalled事件再次唱歌,你可以在这个时候加点逻辑来处理更新的剧本。对于用户来说,这就确保了不管是第一次装扩展还是更新,应用都能像模像样地运作。

popup.html:

虽然这章我们不会深挖popup.html,但你得创建个简洁的文件,让manifest.json里的声明不会空话:

xml 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>智能笔记</title>
    <style>
        /* 这里可以穿点漂亮的衣服 */
    </style>
</head>
<body>
    <h1>智能笔记</h1>
    <!-- 这里会展示用户的小秘密笔记和一些神秘按钮 -->
</body>
</html>

icon.png:

别忘了准备一个icon.png图标文件,放在你的插件根目录里,给它一个家。

测试:

干完这些活儿,你的插件就应该能正常装上了,并且在安装或更新的时候在控制台里唱歌。别忘了去Chrome的扩展页面(chrome://extensions/)装上你的插件,并且开启开发者模式来试试。

就像下面这图一样:

当你打开浏览器的调试模式控制台,重新安装Chrome插件,你会看到一段日志唱歌给你听。

这就是第2章的全部精彩内容啦,通过这一章,你已经把后台脚本学废了,并为下一章的高级功能做好了准备。下回我们继续搞"智能笔记"插件的其他花样,别错过哟!

相关推荐
前端拾光者11 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448029 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome