正文 

当前位置： 首页 > java > java教程

编写一个chrome浏览器扩展程序

BacktoReff. BacktoReff.     2022-09-21     282

关键词：

浏览器扩展允许我们编写程序来实现对浏览器元素（书签、导航等）以及对网页元素的交互，

甚至从 web 服务器获取数据，以 Chrome 浏览器扩展为例，扩展文件包括：

  • 一个manifest文件(主文件,json格式)
  • 至少一个HTML文件(主题可以没有HTML文件)
  • JavaScript文件 (可选，非必须)
  • 任何其他你需要的文件(比如图片)

将这些文件放在一个文件夹内，并通过浏览器提供的打包程序进行打包，就可以发布使用了。

这里以一个简单的例子，说明 Chrome 扩展的创建和运行过程。

首先创建一个文件夹 extensionDemo，在文件夹中分别创建以下文件：

首先看 manifest.json 文件：

{
  "name": "My Extension",
  "manifest_version": 2,
  "version": "1.0",
  "description": "A Simple Browser Extension",
  "browser_action": {
    "default_icon": "cat.png"
  },
  "content_scripts": [
    {
      "matches": ["file:///Users/wangxi/Desktop/extensionDemo/index.html/*"],
      "js": ["script.js"]
    }
  ]
}

 

 对应字段解析：

{
  // 扩展名称
  "name": "My Extension",
  // manifest 版本，只能为 2，int 类型
  "manifest_version": 2,
  // 扩展 版本
  "version": "1.0",
  // 扩展描述
  "description": "A Simple Browser Extension",
  // 控制提示文字、图标标记、弹出窗口等
  "browser_action": {
    // 设置地址栏右侧的扩展图标
    "default_icon": "cat.png",
    // 鼠标移到扩展图标上显示的文字，可选
    "default_title": "I am a Cat",
  },
  // 内容脚本，在页面带入完成后调用，在脚本中可以获取页面的 DOM 元素
  "content_scripts": [
    {
      // 扩展脚本生效的页面地址（*如果是本地测试的页面，则需要填写的是浏览器中url的地址，而不是本地的文件地址）
      "matches": ["file:///Users/wangxi/Desktop/extensionDemo/index.html/*"],
      // 指定扩展脚本文件
      "js": ["script.js"]
    }
  ]
}

 

为了模拟目标网页，这里编写 index.html 文件作为演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Moon Cakes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    html, body, div, header, footer {padding:0;margin:0;background:#FFE;font-family:'Arial';}
    footer {box-sizing:border-box;position:absolute;bottom:0;width:100%;padding:10px;background:#FFF;text-align:center;}
    button {width:100%;padding:10px 20px;font-size:14px;background:#00A854;color:#FFF;border:none;border-radius:5px;outline:none;}
    button:isabled {background:#EEE;color:#CCC;}
    a {display:block;text-decoration:none;color:#FFF;}
    section {padding:60px 0;text-align:center;}
    #count {color:#108EE9;font-size:20px;}
    .banner {width:100%;}
    .cat {width:30%;}
  </style>
</head>
<body>
  <div>
    <header><img class="banner" src="./IU.png"></header>
    <section>
      <img class="cat" src="./cat.png">
      <p>U click the button <span id="count">0</span> Times...</p>
    </section>
    <footer>
      <button id="btn" disabled='disabled'>
        <a id='link' href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gbk&word=iu&fr=ala&ala=1&alatpl=star&pos=0&hs=2&xthttps=111111" target="_blank">Click to get the Girl</a>
      </button>
    </footer>
  </div>
  <script>
    window.onload = function () {
      let $btn = document.getElementById('btn')
      let $count = document.getElementById('count')
      let num = $count.textContent
      let timer = setTimeout(() => {
        $btn.removeAttribute('disabled')
      }, 3000)
      $btn.onclick = function () {
        console.log('click btn...')
        $count.textContent = num++
      }
    }
  </script>
</body>
</html>

 

页面比较简单，页面按钮不可用，设置定时器，三秒后移除按钮的 disabled 属性。（模拟商城的秒杀活动）

继续看脚本文件 script.js：

let $btn = document.getElementById('btn')
let $count = document.getElementById('count')
let timer = setInterval(() => {
  let ifBtnDisabled = $btn.getAttribute('disabled')
  if (ifBtnDisabled !== 'disabled') {
    document.getElementById('link').click()
    clearInterval(timer)
  } else {
    console.log('button disabled...')
  }
}, 500)

 

简单分析一下：首先获取页面的对应按钮元素，启用定时器判断按钮是否可用，若不可用则继续定时循环进行判断，直到按钮可用，触发按钮的点击事件，同时清除计时器。

添加扩展的方法：

选择扩展文件夹后，扩展文件就会被自动添加到浏览器扩展中，如果修改了扩展文件，直接点击 Relaod（cmd + R 刷新)即可：

启用扩展后，在地址栏右边会出现前面添加的 icon，如下：

然后打开对应的网页，看一下效果：

Click to get the Girl...真有这等好事就好了...

 

参考：chrome扩展程序开发之在目标页面运行自己的JS

在 Google Chrome 扩展程序中使用 SSH

...布时间】：2014-03-1110:20:02【问题描述】：我想为googlechrome浏览器编写一个扩展程序，它从网站读取一些链接并将这些链接复制到一个文件中。我想通过ssh将此文件发送到我本地网络中的另一台计算机。如何在我的chrome扩展程序中... 查看详情

用户脚本与 Chrome 扩展程序 [关闭]

...什么？【问题讨论】：使用用户脚本，除非您需要：操作浏览器控件；处理文件；在选项 查看详情

编写一个简单的chrome插件

编写一个chrome插件，你需要准备好一个好看的图片作为扩展程序的图标。准备好图标后，我们就要开始设计插件了。1、chrome扩展需要的文件可以这么理解，chrome扩展程序就是一个web应用，所以我们实际是要写html代码。而chrome插... 查看详情

Chrome 扩展程序创建一个可通过单击浏览器操作访问的 .html 页面。

】Chrome扩展程序创建一个可通过单击浏览器操作访问的.html页面。【英文标题】：ChromeExtensionscreatinga.htmlpageaccessiblebyclickingbrowseraction.【发布时间】：2016-06-2011:09:40【问题描述】：我一直在尝试浏览网络，但很难找到答案。我见... 查看详情

如何在chrome浏览器安装第三方扩展

简单教你·Chrome浏览器如何安装第三方扩展程序谷歌在2012年ChromeV21+开始禁止第三方扩展静默安装，2014年ChromeV30+开始任何非Chrome网上应用店(ChromeWebStore)下载的扩展将自动停用。自己瞎折腾一个Chrome插件crx打包之后拖进chrome://exten... 查看详情

Chrome 扩展程序可在不同的浏览器中打开特定的 URL [关闭]

】Chrome扩展程序可在不同的浏览器中打开特定的URL[关闭]【英文标题】：ChromeextensiontoopenupaspecificURLinadifferentbrowser[closed]【发布时间】：2015-04-2112:23:07【问题描述】：提前感谢您的任何帮助！我想知道是否有一个Chrome扩展程序可... 查看详情

使用 Chrome 扩展程序在 Google Chrome 浏览器中访问搜索查询文本

】使用Chrome扩展程序在GoogleChrome浏览器中访问搜索查询文本【英文标题】：AccessingSearchQueryTextinGoogleChromeBrowserwithChromeExtension【发布时间】：2015-07-1709:07:20【问题描述】：我正在为自己构建一个Chrome扩展程序。我想访问我的搜索... 查看详情

Chrome 扩展程序未在 YouTube 的浏览器导航中加载

】Chrome扩展程序未在YouTube的浏览器导航中加载【英文标题】：ChromeextensionisnotloadingonbrowsernavigationatYouTube【发布时间】：2013-08-2605:13:34【问题描述】：假设我有一个扩展程序，当您到达YouTube视频页面时会加载。我注意到，当您使... 查看详情

Chrome 扩展程序在调用 launchWebAuthFlow API 时使 Microsoft Edge 浏览器崩溃

】Chrome扩展程序在调用launchWebAuthFlowAPI时使MicrosoftEdge浏览器崩溃【英文标题】：ChromeExtensioncrashestheMicrosoftEdgebrowserwhilecallinglaunchWebAuthFlowAPI【发布时间】：2022-01-0806:09:33【问题描述】：我们有一个在Chromiumedge和Chrome浏览器上运行... 查看详情

如何为向下滚动到最后的 Chrome 扩展程序编写 JavaScript 代码（我想获取所有 Facebook 好友列表）

】如何为向下滚动到最后的Chrome扩展程序编写JavaScript代码（我想获取所有Facebook好友列表）【英文标题】：HowIcanwritetheJavaScriptcodeforChromeextensionthatscrolldowntillend(IwanttogetallFacebookfriendslist)【发布时间】：2021-01-2423:38:14【问题描述】... 查看详情

chrome扩展程序-记住用户输入javascript

...序列转换为相应的氨基酸序列。理想情况下，我可以点击浏览器中的扩展图标，然后会弹出一个文本框，我可以将序列粘贴到其中。点击“翻译”后，氨基酸序列将出现在输入文本框下方。我希望稍后再添加更多功能，但这是扩... 查看详情

如何在 Chrome 扩展程序中禁用同源策略？

...个扩展，所以我应该有责任不去实现自己的目标。在开发浏览器扩展时摆弄这个完全不合情理的安全问题是非常令人沮丧的。我不想通过全局禁用它来使整个浏览器不安全。仅适用于manif 查看详情

在 Chrome 浏览器中检测高对比度扩展程序的使用

】在Chrome浏览器中检测高对比度扩展程序的使用【英文标题】：DetectHighContrastextensionuseinChromebrowser【发布时间】：2016-11-2408:05:30【问题描述】：我正在尝试以高对比度模式访问我的网站。为了检测何时启用高对比度模式，我创建... 查看详情

了解chrome扩展程序开发--摘抄

...简单几句话描述一下Chrome扩展程序：Chrome扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。比如Chrome扩展可以在浏览器的工具栏和地址栏中显示图标，它可以更改用户当前浏览的网页中的内容，也可以更改浏览器代理... 查看详情

如何真正隔离 Google Chrome 扩展中的样式表？

...时间】：2012-09-2819:00:15【问题描述】：我编写了一个谷歌浏览器扩展程序，它会弹出一个带有自动完成字段的对话框，它有自己的风格，但是在某些网站上我的CSS完全被破坏了，看起来不太好。我知道使用iFrame隔离样式，但在Goo... 查看详情

Chrome 扩展程序截取的屏幕截图 - 隐私风险？

...这个特定的扩展（和许多其他扩展）具有允许您记录整个浏览器窗口的功能。 查看详情

chrome浏览器怎么导出已安装的扩展程序为crx文件

我们都知道，如今Chrome浏览器的应用商店都打不开，进不去了，需要翻出去才能上。所以对于一些已经安装过的扩展程序（插件）想导出保存一下。因为Chrome默认安装在C盘，怕重装系统后又要重新安装这些插件了。那么，怎么... 查看详情

.NET 应用程序与 Google Chrome 扩展程序的交互

...发布时间】：2014-03-2513:30:33【问题描述】：我有一个关于浏览器远程控制的问题。我的主要目标是从谷歌浏览器中读出所有打开的标签URL，如果找到匹配的URL并重新加载当前页面，则还聚焦一个标签。所有这些东西都是从本机应... 查看详情