chrome插件开发

本插件是基于nativeMessaging

crx打包内容:

1.   manifest.json

{
    "manifest_version": 2,
  "name": "demo",
  "version": "1.0",
  "description": "simple demo",
  "browser_action": {
    "default_icon": "13.png",
    "default_title": "simple demo",
    "default_popup": "popup.html"
  },
  "app": {
    "launch": {
      "local_path": "popup.html"
    }},
  "permissions": ["nativeMessaging"]
}  

2.   popup.html

<div style="width:200px;">
  <p id="label">This is a simple Demo</p>
  <button id="yes-button">Yes</button>
</div>
<script type="text/javascript" src="script.js"></script>

3.  script.js

document.getElementById(‘yes-button‘).addEventListener(‘click‘, function(){
  var port = chrome.runtime.connectNative(‘com.google.chrome.demo‘);
    port.onDisconnect.addListener(function() {
      console.log("Disconnected");
    });
    port.postMessage({ text: "Hello, my_application" });

    port.onMessage.addListener(function(message, sender, sendResponse) {
        var strs = sendResponse;
      console.log("Received" +strs+" "+ message.text+" "+ JSON.stringify(message));
    })
});

将以上3个文件和一个图片放到一个文件夹中,进入chrome://extensions/ ,点选开发者模式,选择,打包扩展程序,即可 将文件夹中的文件打包成crx插件,在将插件拖入,即可完成安装,只是现在google要求插件必须是由应用商店下载的,所以重新打开google浏览器后,这个插件就自动停用,且无法再启用。

与exe的通信:

1.   host.json

{
  "name": "com.google.chrome.demo",
  "description": "Native messaging API host",
  "path": "D:\\Documents\\Visual Studio 2008\\ProjectsGoogle\\googleDemo\\Release\\googleDemo.exe",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://agajdodbfodoocphplebagbgakgaodjj/"
  ]
}

path:就是你想调用的exe完整路径

chrome-extension:是你刚才打包的crx安装后,显示在界面上的ID

name:链接名

2.   host.reg

Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.google.chrome.demo]
@="D:\\360安全浏览器下载\\host.json"

创建注册表项,com.google.chrome.demo就是刚才的host.json文件中的name,项数据是host.json的路径

点击YES 按键后,就将exe启动了,以上即是chrome插件启动本地exe程序内容

下面写一下exe中的内容:C++

在OnInitDialog函数中创建线程

HANDLE hThreadcom=CreateThread(NULL,
        0,
        (LPTHREAD_START_ROUTINE)commandThreadFunc,
        NULL,
        0,
        NULL);

HANDLE hThreaddata=CreateThread(NULL,
      0,
      (LPTHREAD_START_ROUTINE)dataThreadFunc,
      NULL,
      0,
      NULL);

线程处理函数

void commandThreadFunc()
{
    char temp[128];
    stringstream strs;
    while(1)
    {
        int ch;
        if((ch = getchar())!=EOF)
        {
            sprintf(temp,"%c",ch);
            strs<<temp;
            OutputDebugString(strs.str().c_str());
        }
    }}
void dataThreadFunc()
{
    while(1)
    {
        //send to stdout
        // Define our message
        std::string message = "{\"text\": \"This is a response message\"}";
        // Collect the length of the message
        unsigned int len = message.length();
        // We need to send the 4 bytes of length information
        std::cout << char(((len>>0) & 0xFF))
            << char(((len>>8) & 0xFF))
            << char(((len>>16) & 0xFF))
            << char(((len>>24) & 0xFF));
        // Now we can output our message
        std::cout << message;
    }
}

nativeMessaging通信是基于io流的,使用getchar()函数即可接收发送到exe的消息

现在的问题是接收exe发送到chrome插件的有问题,接收不到,在console里看不到,不知道为什么?还有就是nativeMessaging不能进行实时通信,我的需求是本地exe会一直向google浏览器发送数据,基本上是100-200包每秒,在浏览器上绘制图形,现在还有待研究中..........

时间: 2024-11-10 08:11:02

chrome插件开发的相关文章

【Chrome】Chrome插件开发(一)插件的简单实现

不同浏览器插件开发比较 Chrome的插件开发起来最简单,总体上看没什么新的技术,开发语言就是javascript,web前端工程师能很快上手. Firefox的插件开发则复杂许多,涉及到环境的搭建和一些WEB以外的技术. IE的插件开发就更复杂了,需要熟悉C++和COM技术,当然还要装微软的Visual Studio. 这里有篇老外写的文章,对比Chrome.Opera和Firefox的插件开发的:http://blog.nparashuram.com/2011/10/writing-brow

vue.js 初体验— Chrome 插件开发实录

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

Chrome插件开发入门(二)——消息传递机制

Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一个自己写过的demo,基本就对消息传递能够熟悉了. 在开发 Chrome 扩展时经常需要在页面之间进行通讯,比如 background 与 content script 之间,background 与 popup 之间等等,本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现. 一

chrome插件开发入门

1.参考文档链接 chrome浏览器插件开发官网教程 https://developer.chrome.com/extensions/getstarted foege工具,能够使用一份代码同时生成firfox,chrome,ie的插件,但是目前该项目已经不再维护 http://legacy-docs.trigger.io/en/v1.4

提醒我喝水chrome插件开发指南

起因 因为最近工作比较忙,经常忘记了喝水.作为一名前端开发人员,面对着浏览器工作是常态.所以这里为了解决这个痛点,面向前端开发人员写了一款浏览器插件.他的作用就是提醒喝水. 这里将半个小时设置为一个周期,大概和番茄工作法的原理一样.基本上集中注意力半个小时人也就累了.这个时候喝口水,舒缓一下紧张的神经.也作为一个休息的周期.为我们的工作继续高效的进行奠定了节奏. 成果 这是我做的浏览器插件 插件下载地址 开发思路 下面顺道介绍一下浏览器插件开发思路,编程不光要求理论还要有实践,撸起袖子直接干.

Chrome插件开发 小插件-acfun看图 3

插件的安装与使用. 写好插件后,通过chrome开发者模式加载插件. 点击加载扩展程序,选择插件的文件夹即可在chrome中加载插件. 然后更改自己的插件后点刷新进行更新,如果有错误,chrome会报错. 要想发布自己的插件就要先交钱,这跟steam上的绿光,以及ios应用等等都一样. 全部: ACfun看图

google chrome插件开发,自己动手,丰衣足食

因为平时上网都用chrome,但总感觉除了速度快,简洁以外总还有地方满足不了我的需要,然后找插件…后来发现,插件虽然海量但找个称心如意的也不是件容易的事儿,用在找插件的时间都能自己写一个了,于是,今年夏天开始的闲暇时间也写了几个,然后在应用中心断断续续发布了,这些插件原本是给自己用的,但也有几个用户专门找我提出了他们的需求. 从开始的不懂到现在三两下就能玩儿一个,走了点远路,今天在这里写下从开发到发布的简单流程,都是很简单的知识 一个可用的插件至少包括一个manifest.json和一个js文件

Chrome插件开发 小插件-acfun看图 1

之前在acfun看文章,经常遇到别人发其他网站的图而导致无法看到.这很不好,而且要想看到这些图片,操作是获得图片地址后,将最后的jpg改为jpeg即可,这种简单的操作应该是很容易实现的,于是我要开发一个简单的小插件来方便自己看评论.... 首先,先介绍一下开发的原因,在acfun下的评论中有时候会有一些其他人发的图片,这些图片由于是从自己的网盘或者空间发出来的,类似百度,会被屏蔽,出现 一般的解决方法是获得其图片地址后,在新的页面打开,将最后的jpg后缀改为jpeg,然后就可以看到图片了. 然后

Chrome插件开发 小插件-acfun看图 2

继续,然后才是重点,关于右键菜单,右键菜单的创建使用chrome.contextMenus.create()函数.而要新建一个js文件来存放这些函数. 这些函数以及事件响应都是要在浏览器运行时调用,所以要在manifest中的 "background" 项中的   "scripts"中加上js项,表示这些是浏览器运行是的背景为这些js,即这些js一直在运行监听. "background": { "scripts": [&quo

Chrome插件开发笔记

使用 XMLHttpRequest来抓取盗版小说网站里面的内容,但是注意需要在manifest.json文件中设置permission var xhr = new XMLHttpRequest();xhr.open("GET", "http://www.biqukan.com/1_1207/", true);xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // var resp = e