Chrome Extension Easy Sample-抓取當前網頁網址 ~ Solinari's Notes

Chrome Extension也就是Chrome瀏覽器的擴充功能，像是常見的AdBlock就是眾多的擴充功能之一。

今天主要是紀錄一個我自己在學Chrome Extension所寫的第一個例子，作用是「當我按下右上角的擴充功能的按鈕時它會Show出當前網頁的網址」。

參考網頁:(1)https://developer.chrome.com/extensions (Google提供的教學及技術文件，十分詳細)

(2)http://www.cnblogs.com/guogangj/p/3235703.html (Extension開發攻略)

這個例子需要的程式有6個檔案，會使用到HTML、CSS、JavaScript以及JQuery

1. icon.png

(Chrome右上角所顯示擴充功能的圖示，個人推薦圖片可至https://design.google.com/icons/搜尋)

2. manifest.json(關於這個擴充功能的版本、功能、圖示的匯入、權限等資訊)

3. popup.html(Chrome右上角按下去所彈出來的畫面)

4. popup.css(設計popup.html外觀的CSS檔)

5. popup.js(Show出當前網頁的網址所需要的程式碼，並在popup.html檔中載入)

6.jquery-3.1.0.min(JavaScript Library，可至官網下載https://jquery.com/)

程式碼如下

	{
	"manifest_version": 2,
	"name": "Google extensions easy sample",
	"description": "Show current page URL",
	"version": "1.0",
	"browser_action": {
	"default_icon":"icon.png" ,
	"default_popup": "popup.html"
	},
	"permissions": ["tabs"]
	}

view raw manifest.json hosted with ❤ by GitHub

manifest→版本為2,Chrome 18開始已不支援version 1

name→此擴充程式的名字

description→此擴充程式的描述

version→此擴充程式的版本

browser_action

↑所有頁面，右上角的圖示都會顯示，如只針對部分網頁顯示要使用Page_Action

default_icon→右上角圖示

default_popup→彈跳出來要顯示的html

permissions": ["tabs"]→允許擴充程式擁有那些權限

view raw popup.html hosted with ❤ by GitHub

view raw popup.css hosted with ❤ by GitHub

view raw popup.js hosted with ❤ by GitHub

將這4個檔案、圖片Icon以及下載下來的jquery-3.1.0.min，放在同一個資料夾，參考這篇文章Chrome中使用自己撰寫的擴充功能，丟到Chrome上，測試這個簡單的Chrome Extension!

執行畫面

	<!--
	File:popup.html
	Author:SolinariWu
	Descript:Google Extensions Easy Sample-Show current page URL
	Date:2016/7/25
	Reference:https://developer.chrome.com/extensions
	http://www.cnblogs.com/guogangj/p/3235703.html
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Google Extensions Easy Sample</title>
	<link rel="stylesheet" type="text/css" href="popup.css" />
	</head>
	<body>
	<div id = "msgLabel" ">Show URL</div>
	</body>
	<script src="jquery-3.1.0.min.js"></script>
	<script src="popup.js"></script>
	</html>

	/*
	File:popup.css
	Author:SolinariWu
	Descript:Google Extensions Easy Sample-Show current page URL
	Date:2016/7/25
	Reference:https://developer.chrome.com/extensions
	http://www.cnblogs.com/guogangj/p/3235703.html
	*/
	body {
	width: 200px;
	}

	/*
	File:popup.html
	Author:SolinariWu
	Descript:Google Extensions Easy Sample-Show current page URL
	Date:2016/7/25
	Reference:http://www.cnblogs.com/guogangj/p/3235703.html
	https://developer.chrome.com/extensions
	*/
	document.addEventListener('DOMContentLoaded', function () {
	chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
	var url = tabs[0].url;
	$("#msgLabel").text(url);
	});
	});

Home About