折腾Chrome插件,让内容脚本与文本交互~

简介: 折腾Chrome插件,让内容脚本与文本交互~

我们要用内容脚本(content scripts)来给插件装上一双慧眼,让它能在你浏览的页面上跳来跳去,和文字做游戏。这就像给插件喂了一颗智慧豆,让它变得聪明起来,能够直接和网页内容打招呼啦!


在本章,我们将介绍如何通过内容脚本(content scripts)增强“智能笔记”插件的页面交互功能。内容脚本的作用是在用户浏览的页面上执行脚本,让我们的插件能够直接与页面内容交互。

manifest.json 更新

首先,我们需要给我们的manifest.json添加对内容脚本的支持,并允许它运行在用户浏览的所有页面上。

{
  "manifest_version": 3,
  "name": "智能笔记",
  "version": "1.0",
  "permissions": [
    "contextMenus",
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可以让内容脚本在所有网页上运行
      "js": ["content.js"]       // 指定将要注入的脚本
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "48": "icon.png"
  }
}

在这里,我们添加了一个content_scripts字段,它指定了内容脚本的匹配模式和要注入的脚本文件。matches字段的<all_urls>值告诉Chrome插件需要在所有加载的页面上注入content.js脚本。

content.js

现在,让我们创建content.js来处理选中文本和与背景脚本的交互。

// content.js

// 在页面上监听鼠标抬起事件,以获取用户选择的文本
document.addEventListener('mouseup', function() {
  let selectedText = window.getSelection().toString().trim();
  if (selectedText.length > 0) {
    // 用户选择了文本,我们可以在这里处理文本,比如发送给背景脚本

    // 向背景脚本发送消息
    chrome.runtime.sendMessage({
      action: 'saveText',
      text: selectedText
    }, function(response) {
      // 这里可以处理背景脚本的响应
      console.log(response);
    });
  }
});

在content.js中,我们监听了mouseup事件来检测何时用户选择文本。一旦检测到文本被选中,我们就使用chrome.runtime.sendMessage方法将选中的文本和动作类型发送给背景脚本(Service Worker)。背景脚本可以对此消息做出响应,并进行相应的处理,例如保存文本。

我们进一步分析一下这个文件的作用:

content.js脚本中,我们编写代码以实现两个主要功能:一是捕捉用户在页面上选中的文本,二是将这些信息传递给背景脚本(Service Worker)。下面分步骤解释content.js中的相关代码和它们的作用。

捕捉选中文本

首先,我们需要在content.js脚本中添加一个事件监听器,用于捕获用户在页面上选取的文本。这个监听器会在用户执行鼠标抬起动作后触发,因为这通常意味着用户完成了文本的选择。

document.addEventListener('mouseup', function() {
  let selectedText = window.getSelection().toString().trim();
  if (selectedText.length > 0) {
    // 在这里可以添加后续处理选中文本的代码
  }
});

在这段代码中:

  • document.addEventListener('mouseup', function() {...}):添加了一个事件监听器来监听文档的mouseup事件。
  • let selectedText = window.getSelection().toString().trim();:使用window.getSelection()获取用户选中的文本,通过.toString()将其转换为字符串,并通过.trim()移除字符串两端的空白字符。
  • if (selectedText.length > 0) {...}:检查是否有文本被选中(即,选中文本的长度大于0)。
与背景脚本交互

当我们捕捉到用户选中的文本后,我们可能想要对这些文本执行一些操作,例如保存。为此,content.js需将选中的文本发送给背景脚本处理。

// 向背景脚本发送消息
chrome.runtime.sendMessage({
  action: 'saveText',
  text: selectedText
}, function(response) {
  // 这里可以处理背景脚本的响应
  console.log(response);
});

在这段代码中:

  • chrome.runtime.sendMessage({...}, function(response) {...}):通过Chrome的消息传递API发送消息。消息内容是一个对象,包含action(指定动作类型)和text(选中的文本)两个属性。
  • function(response) {...}:是一个回调函数,一旦背景脚本处理完消息并发回响应,这个函数就会被调用。在这个示例中,我们仅将响应内容打印到控制台,但在实际使用中,可以更新页面上的元素,显示保存状态等。

总之,content.js脚本的作用是在页面上运行,监听用户的操作(如文本选择),并与背景脚本通信。这样的分工允许content.js负责页面直接操作,而背景脚本则处理更多全局性或需要持久状态的任务。通过这种方式,我们可以实现不同组件之间的分离和协作,这是扩展开发中的一种常见模式。

background.js 更新

为了响应content.js脚本发送的消息,我们需要在background.js中添加消息监听器。

// background.js

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'saveText') {
    // 处理保存文本的动作
    console.log('来自内容脚本的文本:', request.text);
    // 存储文本到localStorage或者chrome.storage
    // ...

    // 回复内容脚本
    sendResponse({status: '文本已保存'});
  }

  return true; // 保留消息通道打开,以便异步发送响应
});

在这个更新的background.js中,我们增加了一个监听函数来接收来自内容脚本的消息。当收到saveText动作时,我们会在控制台打印出收到的文本,并模拟保存文本的过程。发送回内容脚本的响应表明文本已被处理。

小结

重新加载插件,刷新网页,同事打开控制台。

选中一段文字,鼠标选中一段,此时应该可以看到打印出了日志。

这就表明,content.js已经生效,我们取得了很大的突破!

在本章节中,我们通过添加内容脚本,让“智能笔记”插件能够与用户浏览的网页直接交互,捕捉用户选中的文本,并将其传递给背景脚本以进行存储和管理。内容脚本和背景脚本之间的通信是通过Chrome提供的消息传递API来实现的。这为我们接下来实现更复杂的页面互动和数据处理奠定了基础。


下一个章节,我们将细化笔记的保存过程,并探讨如何将标记持久化并展示在页面上,提升用户体验。

相关文章
|
4天前
|
存储 Web App开发 JSON
【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储?
在Chrome插件开发中,遇到问题:存储包含Map和数组的复杂数据结构到`chrome.storage.local`时,读取为空。原因在于`chrome.storage.local`只支持JSON序列化,而Map无法直接序列化。解决方案是使用`serializeMap`和`deserializeMap`方法将Map转换为数组进行存储和读取。更新的`saveMindData`和`getMindData`方法实现了数据的正确序列化和反序列化。
26 5
|
7天前
|
Web App开发 前端开发 安全
Chrome 插件打包发布
Chrome 插件打包发布
15 0
|
7天前
|
Web App开发 JSON JavaScript
Chrome 插件各模块之间的消息传递
Chrome 插件各模块之间的消息传递 一、消息传递 1. 消息传递分类 Chrome 插件的 Action、Background 和 content_script 三个模块之间的信息传输 插件和插件之间的信息传输 网页向插件进行信息传输 与原生应用进行消息传递
8 0
|
7天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
15 0
|
23天前
|
Web App开发 前端开发 JavaScript
Chrome 插件如何开发?
Chrome 插件如何开发?
|
1月前
|
Web App开发 前端开发 JavaScript
折腾Chrome插件,简单地让文本上色~
折腾Chrome插件,简单地让文本上色~
20 0
|
1月前
|
Web App开发
折腾Chrome 插件,怎么给右键菜单增加“选项”?
折腾Chrome 插件,怎么给右键菜单增加“选项”?
30 0
|
1月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
79 0
|
1月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
94 0
|
1月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
174 0