瀏覽器（Chrome）插件開發

時間 2019-11-17

標籤瀏覽器 chrome 插件開發欄目瀏覽器简体版

原文原文鏈接

瀏覽器（Chrome）插件開發

標籤（空格分隔）： WEB相關html

[toc]git

插件包含了三個文件manifest.json、background.js、content.js Github：https://github.com/jukejuke/chrome-plugingithub

manifest.json

插件配置文件chrome

{
	"name" : "FastRun",
	"version" : "1.0.1",
	"description" : "Launch APP ",
	"background" : { "scripts": ["background.js"] },
	"permissions" : [
		"nativeMessaging",
		"tabs",
		"file://*"
	],
	"content_scripts": [
    {
      "matches": ["file://*"],
      "js": ["content.js"]
    }
	],
	"minimum_chrome_version" : "6.0.0.0",
	"manifest_version": 2
}

http://xxx/* 或 file://*json

background.js

後臺文件c#

var port = null; 
var tempTabId = null;
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
     if (request.type == "launch"){
     	
     	getCurrentTabId(connectToNativeHost);
       	//connectToNativeHost(tempTabId);
       	// 回送消息
       	sendResponse({tyep: 'MsgFromChrome', msg: 'Hello, I am chrome extension~'});
    }else if(request.type == "sendMsg"){
    	console.log("sendMsg...");
    	console.log(request.message);
    	getCurrentTabId(tabId);
    	
    	// 發送消息給原生應用（C#)
    	port.postMessage({message: request.message,id:tempTabId});	              
    	// 回送消息
    	sendResponse({type: 'pageEvent', msg: 'Hello, I am chrome extension 2~'});                    
    }
	return true;
});


//onNativeDisconnect
function onDisconnected()
{
	console.log(chrome.runtime.lastError);
	console.log('disconnected from native app.');
	port = null;
}

function onNativeMessage(msg) {
	console.log('recieved message from native app: ' + JSON.stringify(msg));               
	// 發送消息給Content.js,106是getCurrentTabId獲取的tabId
    chrome.tabs.sendMessage(106, JSON.stringify(msg), function(response) { console.log(response)});
}

//connect to native host and get the communicatetion port
function connectToNativeHost(msg)
{
	var nativeHostName = "com.my_company.my_application";
	console.log(nativeHostName);
	console.log("***********************");
 	port = chrome.runtime.connectNative(nativeHostName);
	port.onMessage.addListener(onNativeMessage);
	port.onDisconnect.addListener(onDisconnected);
	// 發送消息給原生應用（C#)
	port.postMessage({message: msg});	
 } 
 
 /**
 * 獲取當前選項卡id
 * @param callback - 獲取到id後要執行的回調函數
 */
function getCurrentTabId(callback) {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
        if (callback) {
            callback(tabs.length ? tabs[0].id: null);
        }
    });
}

function tabId(vTabId){
	console.log(vTabId);
	tempTabId = vTabId;
}

content.js

負責與頁面交互，嵌入到頁面瀏覽器

var launch_message;
var port = null; 

// 添加事件監聽，獲取Web頁面發送消息,事件名myCustomEvent
document.addEventListener('myCustomEvent', function(evt) {
	console.log("myCustomEvent*****");
	// 發送消息給background.js
  chrome.runtime.sendMessage({type: "launch", message: evt.detail}, function(response) {
    console.log(response)
    
    // 發送消息給頁面，頁面建立CustomEvent事件
    var evt = document.createEvent("CustomEvent");
	evt.initCustomEvent('pageEvent', true, false, response);
	// fire the event
	document.dispatchEvent(evt);
  });
}, false);
// 添加事件監聽，獲取Web頁面發送消息,事件名sendMsg
document.addEventListener('sendMsg', function(evt) {
	console.log("sendMsg*****");
	// 發送消息給background.js
	chrome.runtime.sendMessage({type: "sendMsg", message: evt.detail}, function(response) {
  	console.log(response)
	});
}, false);

// 此方式接收background.js不能加載控件
//chrome.runtime.onMessege.addListener(function(request, sender, sendResponse) {
//	console.log("content receive msg ...");
//	console.log(request.message);
//});

// 1 2 接收background.js發送消息
// 1. Injected script script
addEventListener('message', function(event) {
    if (event.data && event.data.extensionMessage) {
        alert(event.data.extensionMessage);
    }
});
// 2. Content script which injects the script:
chrome.extension.onMessage.addListener(function(message) {
    postMessage({extensionMessage: message}, '*');
    return true;
});

Web頁面DEMO

<!DOCTYPE HTML>
<html>
<head>
<script>
function startApp() {
	var evt = document.createEvent("CustomEvent");
	evt.initCustomEvent('myCustomEvent', true, false, "im information");
	// fire the event
	document.dispatchEvent(evt);
}
function sendMsg() {
	var evt = document.createEvent("CustomEvent");
	evt.initCustomEvent('sendMsg', true, false, "test sendMsg");
	// fire the event
	document.dispatchEvent(evt);
}
function sendMsg2(){
	chrome.runtime.sendMessage({type: "sendMsg", message: "test sendMsg2"}, function(response) {
		console.log("************************");
  	console.log(response)
  	console.log("************************");
	});
}

document.addEventListener('pageEvent', function(evt) {
	console.log("pageEvent*****");
  console.log(evt);
}, false);

</script>
</head>
<body>

<button type="button" onClick="startApp()" id="startApp">startApp</button>
<button type="button" onClick="sendMsg()" id="sendMsg">sendMsg</button>
<button type="button" onClick="sendMsg2()" id="sendMsg2">sendMsg2</button>
</body>
</html>

Native Messaging開發

建立manifest.json 放到c盤Native目錄下app

{
	"name": "com.my_company.my_application",
	"description": "Chrome sent message to native app.",
	"path": "C:\\MyApp.exe",
	"type": "stdio",
	"allowed_origins": [
		"chrome-extension://akldhikhjfejogdlcbfmhgipldfipgpp/"
	]
}

path:c#應用程序位置 akldhikhjfejogdlcbfmhgipldfipgpp:擴展程序ID 註冊表註冊原生應用函數

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.my_company.my_application]
@="C:\\\\Native\\\\manifest.json"

c# 程序開發 Program.cspost

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MyApp
{
    static class Program
    {
        /// <summary>
        /// 應用程序的主入口點。
        /// </summary>
        [STAThread]
        static void Main(string[] args)
        {
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            if (args.Length != 0)
            {
                string chromeMessage = OpenStandardStreamIn();
                Application.Run(new Form1(chromeMessage));
            }
            else
            { Application.Run(new Form1()); }
        }
        
        // 從標準流讀取background.js發送消息
        private static string OpenStandardStreamIn()
        {
            //// We need to read first 4 bytes for length information  
            Stream stdin = Console.OpenStandardInput();
            int length = 0;
            byte[] bytes = new byte[4];
            stdin.Read(bytes, 0, 4);
            length = System.BitConverter.ToInt32(bytes, 0);

            string input = "";
            for (int i = 0; i < length; i++)
            {
                input += (char)stdin.ReadByte();
            }

            return input;
        }  
    }
}

Form.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MyApp
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        public Form1(string name)
        {
            InitializeComponent();
            this.Text = name;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            sendMsg(txtContent.Text);
        }
        
        // 向標準輸出流寫入數據，發送到background.js
        private void sendMsg(string content)
        {
            // {"text":"48BA4E4DA17F"} {"text":"48-BA-4E-4D-A1-7F"}
            string msg = "{\"tabId\":"+this.Text+",\"text\":\"" + content + "\"}";
           // Console.Write(msg.Length + msg);
            //msg = "{\"text\":\"48-BA-4E-4D-A1-7F,1C-4D-70-60-CB-32,00-50-56-C0-00-01,00-50-56-C0-00-08,1C-4D-70-60-CB-2E,1E-4D-70-60-CB-2E,1C-4D-70-60-CB-2F\"}";
            var bytes = System.Text.Encoding.UTF8.GetBytes(msg);
 
            var stdout = Console.OpenStandardOutput();
            stdout.WriteByte((byte)((bytes.Length >> 0) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 8) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 16) & 0xFF));
            stdout.WriteByte((byte)((bytes.Length >> 24) & 0xFF));
            stdout.Write(bytes, 0, bytes.Length);
            stdout.Flush();
            //Console.ReadKey();
        }

        private void btnReceiveMsg_Click(object sender, EventArgs e)
        {
            txtReceiveMsg.Text = OpenStandardStreamIn();
        }

        // 從標準輸入流讀取數據
        private static string OpenStandardStreamIn()
        {
            //// We need to read first 4 bytes for length information  
            Stream stdin = Console.OpenStandardInput();
            int length = 0;
            byte[] bytes = new byte[4];
            stdin.Read(bytes, 0, 4);
            length = System.BitConverter.ToInt32(bytes, 0);

            string input = "";
            for (int i = 0; i < length; i++)
            {
                input += (char)stdin.ReadByte();
            }

            return input;
        }  
    }
}