chrome插件-入门

chrome插件的作用

1、屏蔽网页上的广告，提高浏览速度和减少视觉干扰
2、捕捉和编辑网页截图
3、改善在社交媒体平台上的体验，例如提供额外的功能，或自定义外观和布局
4、网页翻译
5、保存和组织网页书签和笔记
6、管理日程安排，设置提醒和定时器

去广告的实战案例

在这里插入图片描述
开发之前最关键的是了解下图框架，background.js、content.js、popup.js等

background.js

可以处理安装提示

chrome.runtime.onInstalled.addListener(function() {
  console.log("隐藏广告插件V2，已安装");
});
1
2
3

可以接收消息

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log("onMessage ", message);
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, function(tabs) {
    const activeTab = tabs[0];
    setTimeout(()=>{
      chrome.tabs.sendMessage(activeTab.id, message);
    },2000)
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13

content.js

隐藏广告的方法,不用管popup.js和background.js直接在content.js写入以下内容


setTimeout(() => {
  $("#aswift_1").hide()
  $(".programmer1Box").hide()
}, 1500)

1
2
3
4
5
6

popup.js

它是popup.html配套的脚本，可以实现点击发送消息


document.getElementById('buttonId').addEventListener('click', function () {
  let message = document.getElementById('name').value
  chrome.runtime.sendMessage({ action: 'hideAds',data: message });
});
1
2
3
4
5

popup.html


DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Patrick的进阶笔记title>
    <link rel="stylesheet" type="text/css" href="../css/popup.css" />
  head>
  <body>
    <input type="text" id="name">
    <button id="buttonId">隐藏广告button>
    <script src="../js/jquery-3.6.0.min.js">script>
    <script src="../js/popup.js">script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

相关阅读:
keycloak~token有效期与session有效期的调研
9、Mybatis-Plus 乐观锁
vue app开发调用原生方法实现权限访问授权处理（一）
YOLOv5算法改进（14）— 如何去更换主干网络（3）（包括代码+添加步骤+网络结构图）
如何修改docker容器的端口映射
ubuntu 指纹
tolua源码分析（十一）代码生成
2核4G服务器如何设计编码一款扛得住高并发高吞吐量的商品秒杀系统
23ccpc（最长上升子序列题解）
【计算机毕业设计】基于SpringBoot+Vue电影在线订票系统的开发与实现

原文地址：https://blog.csdn.net/wxm6614/article/details/133443344