美文网首页
如何开发一个chrome插件

如何开发一个chrome插件

作者: KatherineLo | 来源:发表于2024-07-10 12:57 被阅读0次

一、快速入门

首先,创建一个项目chrome-plugins-x,在里面创建一个manifest.json文件

// manifest.json
{
  "name": "插件名称",
  "description": "插件描述",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"  // 作用的网页
      ],
      "js": [
        "content.js"  // 对网页进行操作的文件,后面创建
      ]
    }
  ]
}

根据上面json文件的描述,我们创建一个content.js文件,对网页进行操作

// content.js
window.onload = function () {
  // 实际执行的操作
  // 这里我们写一个alter操作,直接看效果,先运行成功再丰富细节
  alter('123')
}

接下来我们在chrome上打开扩展程序的页面 chrome://extensions/ (在地址栏直接输入这个地址即可)

image.png

如图打开开发模式

点击 加载已解压的扩展程序

选择刚才创建的项目文件夹即可

然后我们打开目标网页(比如上面的manifest.json文件我写的是weibo这个网页,那么我就直接打开https://weibo.com),可以看到弹出我们刚才写的alter,说明加载成功。那么接下来可以删掉alter,写一些真正想要插件执行的事件。

二、插件操作dom元素

接下来我们具体操作一下content.js文件,首先我们应该知道目标页面的dom结构,然后通过操作dom元素。

举例我们想要写一个获取所有页面中所有文章标题和内容的方法,那么第一步我们应通过 右键--检查 查看我们要获取的元素的结构

image.png

如图我们可以看出,整篇文章包含在一个className为m-icnt的div元素中,其中标题为className为tit的h2元素。那么我们就可以这么操作:

window.onload = function () {
  this.fetchDocs();
}

function fetchDocs() {
  const docs = [];
  const docsElement = document.querySelectorAll('.m-icnt');
  for (let doc of docsElement) {
    const title = (doc.querySelector('.tit'))?.textContent;
    const content = doc?.textContent;
    docs.push({ title, content });
  }
  console.log(docs);
}

当我们更新代码时,要在浏览器上看到效果,在扩展程序页面点击刷新按钮即可


image.png

三、点击插件图标弹出框

当我们已经可以通过content.js文件,从页面中获取文章之后。我们希望能够点击插件图片,弹出一个页面弹出框,文章就列在上面。那么首先第一步,需要在manifest.json文件中添加弹出框页面

// manifest.json
{
  "name": "插件名称",
  "description": "插件描述",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"  // 作用的网页
      ],
      "js": [
        "content.js"  // 对网页进行操作的文件,后面创建
      ]
    }
  ]
}

创建popup.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2 style="min-width: 200px;text-align: center;">插件弹出框页面</h2>
</body>
</html>

效果:


image.png

四、在插件弹出框页面使用Vue

当我们使用原生js将获取到的数据操作显示到页面上的时候,稍微会比较繁琐,也不利于dom结构一目了然,因此我们引入Vue来写这个弹出框。

首先将vue的js文件下载并放入项目中,然后在popup.html文件中引用。然后创建popup.js文件并引入。这里,当引用vue文件的时候,需要在manifest.json中添加content_security_policy字段,解开引用权限

manifest.json

{
  ...
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval'; object-src 'self' ;"
  ...
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 最外层这个div的id必须为app,与js文件的#app相对应 -->
  <div id="app" style="min-width: 200px;text-align: center;">
    {{message}}
  </div>

  <script src="./dist/vue@2.6.6.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js

new Vue({
  el: '#app',
  data: {
    message: '通过Vue完成的插件弹出框页面',
  },
  methods: {

  },
  created: function () {

  }
});

效果:


image.png

Vue引用的时候,也可以不下载js文件直接引用网址(如:https://cdn.bootcss.com/vue/2.6.6/vue.js ),只需要在content_security_policy字段将对应的域名添加上去。但缺点是有时候网速不足够快的时候,拉取远程地址的Vue需要的时间会使得点击插件的时候并不会立刻弹出框,这时候会使得用户误以为插件功能点击后无反应(或随机反应,在不同的网速下,弹出框有时候点一下弹出来有时候不出来,体验不好)。

// manifest.json
{
  ...
  // 重点是这一行,打开了从远程地址获取vue的权限,这一行的重点在于其中添加了vue的引用地址的域"https://cdn.bootcss.com"
  "content_security_policy": "style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' https://cdn.bootcss.com; object-src 'self' ;",
  ...
}

然后将popup.html引用vue的那一行script标签变更为

<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>

五、插件弹出框与页面的数据交换

接下来我们将在content.js文件中获取到文章标题显示到弹出页面中来,那么首先我们希望当点击插件按钮,显示弹出框时,由popup.js文件向content.js文件发出获取文章列表的请求,再由content.js文件操作dom获取文章列表,返回给popup.js文件,popup.js文件通过Vue同步渲染到popup.html页面中。

这里我们可以通过 chrome.tabs.sendMessage 发送消息

通过chrome.runtime.onMessage.addListener 监听并返回消息

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="(item, index) in docs" :key="index" style="min-width: 300px;">
      <h4>{{item.title}}</h4>
    </div>
  </div>

  <script src="./dist/vue@2.6.6.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js

new Vue({
  el: '#app',
  data: {
    docs: []
  },
  methods: {
    init() {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        var activeTab = tabs[0];
        chrome.tabs.sendMessage(activeTab.id, {}, (res) => {
          this.docs = res;
        });
      });
    },
  },
  created: function () {
    this.init();
  }
});

content.js

let docs;

// 监听消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  fetchDocs();
  sendResponse(docs);
});

function fetchDocs() {
  docs = [];
  const docsElement = document.querySelectorAll('.m-icnt');
  for (let doc of docsElement) {
    const title = (doc.querySelector('.tit'))?.textContent;
    const content = doc?.textContent;
    docs.push({ title, content });
  }
}

效果:


image.png

还有一点,chrome插件限制了require/import/export等方法,因此如果想要拆分文件,从其他js文件中引用方法,只能通过html页面script标签引用的方式

比如在popup.html文件中可以:

<script src="./dist/vue@2.6.6.js"></script>
<script src="util.js"></script>
<script src="popup.js"></script>

如果是content.js文件的话,需要在manifest.json文件中添加:

 "content_scripts": [
    {
      "matches": [
        "https://lofter.com/*"
      ],
      "js": [
        "util.js",
        "content.js"
      ]
    }
  ]

End

相关文章

  • Mac下导出chrome插件

    Mac下导出chrome插件Chrome Extensions 插件扩展程序开发入门mac 下chrome扩展插件...

  • Chrome插件开发

    Chrome插件开发

  • Chrome扩展开发

    Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...

  • 十分钟入门:Chrome 插件开发

    如果您想知道如何制作Chrome插件,Chrome的插件文档[https://developer.chrome.c...

  • 开发笔记

    最近做rails开发。 1 chrome 插件 postman这个chrome插件,用来调试api还是颇为方便的。...

  • 技术开发中好用的chrome插件

    今天的主要推荐技术开发用的Chrome插件,对做技术开发的朋友很有帮助,用了这些chrome插件,开发效率可以得到...

  • react-native Expo 下载

    reactNative开发工具 Expo自行下载:Chrome插件下载(需要梯子翻墙)1、下载Chrome插件AP...

  • chrome插件开发

    Chrome插件的开发,实际上就是开发一个Web应用,然后按照Chrome的规则将这个快捷方式安装到Chrome的...

  • Chrome扩展开发之灰色图标

    简明扼要,最近在学习chrome插件开发,起点当然是问度娘,于是一篇“如何从零开始写一个 Chrome 扩展?”的...

  • 5分钟开始你的Chrome插件开发

    快速了解 & 直接下载上手开发 1、什么是Chrome插件 Chrome插件通常是.crx后缀的文件;通过谷歌网上...

网友评论

      本文标题:如何开发一个chrome插件

      本文链接:https://www.haomeiwen.com/subject/iuqthjtx.html