谷歌浏览器扩展程序js实例

1.程序

程序目录 d:\json\test

主程序 manifest.json
主程序图标 icon.png （随意截图生成）
弹出页面 popup.html
弹出页面脚本 popup.js
事件2脚本 body_edit.js
页面通讯脚本 conent-script.js

2.安装

（1）谷歌浏览器 - 自定义及控制（右上角竖3点） - 更多工具 - 扩展程序 - 开发者模式 - 加载已解压的程序，选择程序目录 d:\json\test，若有修改，可点击更新按钮

（2）或建立批处理启动直接加载，关闭浏览器后自动释放扩展程序

test.bat

start "" C:\Users\admin\AppData\Local\Google\Chrome\Application\chrome.exe ^
--load-extension=D:/json/test/ ^
https://www.csdn.net

3.程序实例

manifest.json

{"name": "网页RPA","manifest_version": 2,"description": "网页RPA实例","version": "1.0","icons":{"16": "icon.png","48": "icon.png","128": "icon.png"},"background":{// "page": "background.html",//"scripts": ["js/background.js"]},"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"},// 需要直接注入页面的JS"content_scripts": [{"matches": ["<all_urls>"],"js": ["content-script.js"],"run_at": "document_start"}],"permissions": ["contextMenus", // 右键菜单"tabs", // 标签"notifications", // 通知"webRequest", // web请求"webRequestBlocking", // 阻塞式web请求"storage", // 插件本地存储"http://*/*", // 可以执行executeScript"https://*/*" // 可以执行executeScript]
}

popup.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页RPA实例</title>
<style>
.div-box{ width: 500px; height: 220px; border:1px solid #f00; }
.div-box .h1{ width: 100%;text-align:center; }
.div-box .div-a{ float:left;width:40%;border:1px solid #f00;text-align:center;}
.div-box .div-b{ float:left;width:5%;border:1px solid #ffffff;text-align:center;}
</style>
</head>
<body>
<div class="div-box">
<div class="h1">标题<hr></div>
<div class="div-a">
<span><a href='#' id="id1">执行语句1</a></span><br><br>
<span><a href='#' id="id2">执行脚本2</a></span><br><br>
</div>
<div class="div-b"> </div>
<div class="div-a">
<span><input type=text id="id3" value="传送的数据" size=8></input</span><br><br>
<span><a href='#' id="id4">命令通讯4</a><br><br>
</div>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>

popup.js

window.onload = function () { var id = document.getElementById("id1");  // 执行语句1if(id){id.addEventListener('click', function(){// 动态执行JS代码chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='#ff3333';"});});}var id = document.getElementById("id2");  // 执行脚本2if(id){id.addEventListener('click', function(){// 动态执行JS代码chrome.tabs.executeScript(null, {code: 'var config = 1;'}, function() {chrome.tabs.executeScript(null, {file: 'body_edit.js'});});    });}        var id = document.getElementById("id4");  // 命令通讯4if(id){id.addEventListener('click', function(){// 向content发送消息var s = document.getElementById("id3").value;  // 命令sendMessageToContentScript(    {'cmd':'id4','data':s},//回调函数function(response){if(response) {var ele = document.createElement('div');ele.innerHTML = `<div>`+response+`</div>`;document.body.appendChild(ele);}});});}} //================通用函数=====================
// popup或者background向content主动发送消息
// 向content-script主动发送消息
function sendMessageToContentScript(message, callback)
{getCurrentTabId((tabId) =>{chrome.tabs.sendMessage(tabId, message, function(response){if(callback) callback(response);});});
}// 获取当前选项卡ID
function getCurrentTabId(callback)
{chrome.tabs.query({active: true, currentWindow: true}, function(tabs){if(callback) callback(tabs.length ? tabs[0].id: null);});
}

body_edit.js

document.body.style.backgroundColor='#ffffff';document.body.contentEditable=true;console.log('body_edit');

conent-script.js

//接受通信（从popup来的命令）
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{console.log("request:",request.cmd,request.data);if(request.cmd == "id4"){//alert('id4');}// 将信息保存到本地localStorage.removeItem(request.cmd);localStorage.setItem(request.cmd,request.data);//回调消息sendResponse('我是content，我已收到你的消息：' + JSON.stringify(request));return true;
});

界面效果

谷歌浏览器扩展程序js实例相关推荐

谷歌浏览器扩展程序报错 The message port closed before a response was received.
问题描述 Chrome Extension 报错: Unchecked runtime.lastError: The message port closed before a response was ...
谷歌浏览器出现方格xp系统_win10系统谷歌浏览器扩展程序打不开的解决方案
今天小编给大家分享win10系统谷歌浏览器扩展程序打不开的解决方案,"谷歌浏览器扩展程序"想必对于经常使用谷歌浏览器的用户一定不陌生,它能够对浏览器提供诸多的扩展的功能,但有很多用 ...
谷歌浏览器扩展程序XDM_这才是谷歌浏览器的正确打开方式，有效节省内存占用，流畅飞起...
喜欢谷歌chrome浏览器,并不是仅仅因为他的速度快,安全.更多的是因为chrome浏览器拥有丰富的扩展程序,这些扩展程序让谷歌浏览器变得无所不能.如果你的chrome浏览器不安装扩展程序,那真的不如 ...
chrome谷歌浏览器扩展程序推荐：一键读图OCR
chrome谷歌浏览器扩展程序推荐: 一键读图OCR 你是否需要复制图片.PDF中的文字,或者复制被禁用复制功能的网站的内容?这个扩展可以半办到.这个扩展可以方便的对网页内容进行截图并且识别其中的文字 ...
谷歌浏览器扩展程序XDM_这才是谷歌浏览器的正确打开方式，有效节省内存占用，流畅飞起！...
喜欢谷歌chrome浏览器,并不是仅仅因为他的速度快,安全.更多的是因为chrome浏览器拥有丰富的扩展程序,这些扩展程序让谷歌浏览器变得无所不能.如果你的chrome浏览器不安装扩展程序,那真的不如 ...
写一个自己的谷歌浏览器扩展程序（脚本）
参考chrome扩展开发中文教程:链接: link 1.创建一个文件夹,我这里随便写了一个b,然后在这个文件夹下面创建一个manifest.json(名字不要改) manifest.json {&qu ...
V3版本的谷歌浏览器扩展程序开发
首先建立一个文件夹,然后创建manifest.json文件(扩展程序的配置性文件),使用方法是直接打开扩展程序管理文件,把文件夹直接拖进去.下边介绍manifest.json参数的常见配置(实际使用中 ...
谷歌浏览器扩展程序-实现按钮自动连续点击
谷歌的扩展程序非常简单.必要的文件只有manifest.json文件.在该文件中声明了扩展的名称.版本.权限.设置选项和其他的一些和扩展相关的元数据. 我所做的扩展实现的主要功能是按钮自动连续点击.该 ...
Axure谷歌浏览器扩展程序下载及安装方法(免翻墙)
在用Axure在chrome查看原型时,没有安装Axure谷歌浏览器插件时无法显示会有提示信息,如果未翻墙按照提示是无法直接安装扩展程序的,这里提供插件下载地址并教大家如何安装插件. 平时在使用谷歌浏 ...