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

亲爱的网页冲浪者们,抓紧浮板,我们要继续在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章的全部精彩内容啦,通过这一章,你已经把后台脚本学废了,并为下一章的高级功能做好了准备。下回我们继续搞"智能笔记"插件的其他花样,别错过哟!

相关推荐
fruge5 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia14 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫15 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
代码之光_198032 分钟前
保障性住房管理:SpringBoot技术优势分析
java·spring boot·后端
光影少年34 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_35 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891137 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi38 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾38 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking39 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js