【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

这篇具有很好参考价值的文章主要介绍了【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简言

在想看网页结构的时候一般会F12查看元素内容。
太麻烦了 还不简单方便。

扩展程序

扩展建立在诸如 HTML、JavaScript 和 CSS 之类的 Web 技术之上。它们在单独的沙盒执行环境中运行并与 Chrome
浏览器交互。

扩展允许您通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。

基于上面情况,各浏览器的扩展程序可以帮助我们实现一键操作。
以谷歌浏览器为例:
谷歌扩展程序官网需要科学上网才可以访问。
下面是别人翻译的网站:中文的扩展程序网址.

编写扩展程序

初始化

  1. 在项目中创建一个文件夹 ,例如:
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序
  2. 文件夹内创建扩展程序配置json文件,文件名manifest。
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

值得一提的是,如果你是使用的vscode。可以查找下相关插件,
我安装了 Chrome Extension Manifest JSON Schema 。
没找到 相关扩展程序api插件。。

  1. 编写配置文件manifest。
    下面图是一个简单的配置,更多配置请到官网了解详情。
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

  2. 浏览器加载扩展程序。
    首先找到扩展程序列表页
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序
    打开开发者模式,就可以加载扩展程序了。点击后会让你选择文件夹 ,就选择刚才创的那个文件夹,我的是showBlock。
    不出意外的话,成功!
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

  3. 然后固定 我们的扩展程序。
    【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

编写交互弹窗页 和逻辑

交互弹窗本质就是一个html页面。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>哈哈</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

    .btn {
      margin-top: calc(50% - 20px);
      margin-left: calc(50% - 50px);
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 10px;
      cursor: pointer;
      outline: 1px solid #eaeaea;

    }

    .btn:hover {
      font-weight: bold;
      outline: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="btn">显示页面元素外框</div>
  </div>
  <script type="text/javascript" src="index.js"></script>

</body>

</html>

脚本index.js逻辑:
1.绑定按钮事件
2.编写显隐当前tab页的div的样式逻辑。
3. 通过扩展程序特定的api 查找当前tab页id,以及将css样式内容追加到当前tab页。

const btnDom = document.querySelector(".btn");
btnDom.addEventListener("click", async (e) => {
  let str = e.target.innerText;
  //  查询当前页面id
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  let cssStr = " div {outline:1px solid red !important;}";
  console.log(e, str, str === "显示页面元素外框");
  if (str === "显示页面元素外框") {
    btnDom.textContent = "隐藏页面元素外框";
    // chrome.scripting.executeScript({
    //   target: { tabId: tab.id },
    //   func: show,
    //   args:{isShow:true}
    // });
    //  将css样式内容 添加到当前tab页
    chrome.scripting.insertCSS({
      target: { tabId: tab.id },
      css: cssStr,
    });
  } else {
    btnDom.textContent = "显示页面元素外框";
    //  将添加的css样式内容 从当前tab页删除
    chrome.scripting.removeCSS({
      target: { tabId: tab.id },
      css: cssStr,
    });
  }
});
function show(isShow) {
  if (isShow) window.console.log("显示外框");
  else window.console.log("隐藏外框");
}

效果

更改内容的本地扩展程序不用删除再添加,他会自动更新。
【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序

结语

至此,一个简单的谷歌扩展程序就做好了。如果你用其他的浏览器,请查看其他浏览器扩展程序的官网。文章来源地址https://www.toymoban.com/news/detail-420608.html

到了这里,关于【谷歌扩展程序入门】简单制作一个查看网页结构的扩展程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript】3.1 项目实践:制作一个简单的网页应用

    在此章节中,我们将学习如何使用JavaScript创建一个简单的网页应用。这将是一个待办事项列表应用,用户可以添加新的待办事项,标记已完成的事项,以及删除事项。通过这个项目,我们将学习如何使用JavaScript操作DOM,处理事件,以及使用localStorage进行数据存储。 我们的待

    2024年02月05日
    浏览(45)
  • 制作一个简单HTML电影网页设计(HTML+CSS)

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 1 网页简介:此作品为学生个人主页网页设计题材

    2024年02月09日
    浏览(95)
  • 制作一个简单HTML中华传统文化网页(HTML+CSS)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月08日
    浏览(66)
  • 制作一个简单HTML个人网页网页(HTML+CSS)大话西游之大圣娶亲电影网页设计

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学

    2024年02月04日
    浏览(53)
  • 制作一个简单HTML校园网页(HTML+CSS)学校网站制作 校园网站设计与实现

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年01月16日
    浏览(53)
  • 制作一个简单HTML传统端午节日网页(HTML+CSS)7页 带报告

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 传统春节网页设计 | 圣诞节节日发展 | 中秋 | 端午传统节日习俗庆祝 | 地区特色 | 网站模板 | 等网站的设计与制 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式

    2024年02月09日
    浏览(54)
  • 制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现8个页面

    👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点,学生网页作业源码,制作水平

    2024年02月10日
    浏览(60)
  • 程序员过中秋丨用代码制作一个祝福小网页(html+css)

    大家好,我是陈橘又青,兰经香风满,松窗夜月圆!都说我们程序员过节最没仪式感,再过两周就是中秋节了,今天我们就来制作一个简单的中秋祝福小网页,祝愿看到的所有人好运安康!(附上完整源码,需要的小伙伴自取即可) 目录 写在前面 效果展示 代码展示 HTML cs

    2024年02月02日
    浏览(80)
  • 制作一个简单的C语言词法分析程序

    C语言的程序中,有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表,给出对应的识别码,然后跟据对应的表格来写出程序 程序主要有循环判断构成。不需推理即可产生的符号我们可以把它包装在函数中,返回值为对应的识

    2024年02月06日
    浏览(45)
  • 用tkinter库制作一个简单的登录注册小程序

    目录 各种组件的布局 制作过程中的理解 制作过程中遇到的难点 解决问题的方法 tkinter库作为python的标准库之一,它的功能性十分强大,下面我将使用tkinter库制作一个简易的注册登录窗口(很难看就是了)。 一· 制作之前需要大致明白各个窗体的大致位置,登录注册嘛 自然

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包