一、chrome插件技术介绍
1、chrome插件组件介绍
| 名称 | 职责 | 访问权限 | DOM访问情况 |
| popup | 弹窗页面。即打开形式是通过点击在浏览器右上方的icon，一个弹窗的形式。 注: 展示维度 browser_action:所有页面 page_action:指定页面 | 可访问绝大部分api | 不可以 |
| background | 插件运行的环境。插件启动后就常驻后台，只有一个。这类脚本是运行在浏览器后台的，注意它是与当前浏览页面无关的。 | 可访问绝大部分api | 不可以 |
| content_scripts | 注入到Web页面的JS文件。可以是多个，也可以对注入条件进行设置，也就是满足什么条件，才会将这些js文件注入到当前web页面中。 | 只能访问extennsion、runtime等部分api 例如不能访问chrome.webRequest、chrome.tabs、chrome.windows | 可以 |
2、chrome组件通信方式介绍
| 接收方 发起方 | content_scripts | popup | background |
| content_scripts | - | Chrome.runtime.sendMessage Chorme.runntime.connect | Chrome.runtime.sendMessage Chorme.runntime.connect |
| popup | Chrome.tabs.sendMessage Chorme.tabs.connect | - | Chrome.extension.getBackgroudPage() |
| background | Chrome.tabs.sendMessage Chorme.tabs.connect | Chrome.extension.getViews |
二、应用场景介绍
1、网页翻译插件
利用content-scripts渲染网页翻译页面，然后通过dom元素获取网页内容，最后调用翻译接口即可完成插件实现
2、系统数据爬取插件
利用content-scripts渲染数据爬取页面，然后通过background.js传递系统cookie，最后调用后端爬虫接口即可完成插件实现
注：后端爬虫接口通过selenium-java实现
3、应用效果截图分享
三、源代码分享
插件前端源码:assist-chrome-plugin: chrom助手插件(注:UI风格来自iviewui）
插件后端源码数据爬虫核心代码分享
#初始化配置
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("headless");
chromeOptions.addArguments("no-sandbox");
chromeOptions.addArguments("disable-dev-shm-usage");
Map<String, Object> hashMap = new ConcurrentHashMap<>();
hashMap.put("profile.default_content_settings.popups", 0);
//自动爬取系统文件到本地目录
hashMap.put("download.default_directory", "/download");
chromeOptions.setExperimentalOption("prefs", hashMap);
//chromeOptions.setBinary("D:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe");#开始爬取
ChromeDriver chromeDriver = new ChromeDriver(chromeOptions);
//cookieList来自前端
for(Cookie cookie:cookieList){chromeDriver.manage().addCookie(cookie);
}
chromeDriver.get(pageUrl);
//fecthDataDom为dom对应的cssSelector标签
String fetchDataJs = "return document.querySelector(\""+fecthDataDom+"\").click()";
Thread.sleep(domLoadTime);//dom的渲染时间
chromeDriver.executeScript(fetchDataJs);
chromeDriver.quit();
)
