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

在这里插入图片描述

相关阅读:
基于javaweb的顶岗实习管理系统（jsp+servlet）
关于图计算&图学习的基础知识概览：前置知识点学习（Paddle Graph L）
C++:STL--List
大数据挖掘企业服务平台-道路运输安全大数据分析解决方案
WPF中DataGrid控件绑定数据源
Qt QScrollBar滚动条样式设置
关于vue 组件 uni组件引用的原则
解决caffe中的python环境安装的问题（补充）
FreeRTOS堆栈溢出检查
koa2学习和使用

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