Chrome识图插件的开发

论文总字数：16602字

目 录

1 研究课题原因 1

2 开发环境及工具 1

　　2.1主要开发语言介绍 1

　　2.2应用平台介绍 2

2.3 AJAX技术介绍 2

2.4 Chrome V8 3

3 用户界面结构及功能 3

　　3.1 插件栏 4

　　3.2 鼠标左键单击事件 5

　　3.3 鼠标右键单击事件 5

4 插件后台运行结构及功能 7

4.1使用的API介绍 8

　 4.2用户界面模块介绍 9

　　4.2.1 background.js 9

　　4.2.2 option.js 12

　　4.3 用户交互功能介绍 12

　 4.3.1 shortcut.js 12

　　　　4.3.2 page.js 13

　　4.3.3 ui.js 15

4.4 截图传输功能介绍 15

　 4.4.1 hotkey_storage.js 15

　　　　4.4.2 ajax.js 15

　　4.4.3 isLoad.js 16

5 使用测试 16

5.1 截图基本功能测试 16

5.2 设置界面默认测试 16

　 5.3 切换搜索引擎测试 18

5.4 自定义搜索引擎测试 19

6 结论 20

参考文献 21

致谢 22

Chrome识图插件的开发

张泽世

，China

Abstract:

The second Internet conference convened, chairman Xi mentioned as the world multi-polarization and economic globalization, cultural diversity, in-depth development of social informatization. The Internet for human civilization progress will play a greater role. 

In a few years,the speed of the Internet become faster and faster. More and more applications developed based on web rather than the client, people only need to use the browser so they can load a variety of applications.

Chrome image search extensions is a kind of browser plug-in. It can help people finding the picture’s information of what they want or find the related pictures. When users browse for pictures when to know the image information source or a hindrance, using this plugin can easily find the relevant information of this picture. The plugin now is on the Chrome Extensions market for free use , to ensure the running speed and efficiency, it based on the Chrome broser which has the most users.

Key words: JavaScript，Chrome extensions，browser plug-in，image search，

front end development, AJAX

1. 研究课题及原因

互联网的发展越来越快，带宽的成本已经逐渐降低，应用已不再是客户端形式出现，而是以web应用的方式出现在人们的视野里。Web应用的特点就是使用方便，有网就能用，不占用内部存储空间，所有的数据都保存在服务器。比如现在很流行的网页游戏，云文档编辑都是属于web应用，而这也是前端技术的一种发展体现。

几年前人们上网浏览到一些感兴趣的图片，但是却不知道图片出处或信息时，会将它保存然后发布到一些问答平台希望网友能提供一些图片的相关信息。这样操作时间非常慢，而且问题的范围也比较狭窄。只能在特定的网站上提问，可能几天甚至几年都不会得到想要的结果。近几年，各种图像搜索引擎的崛起，使得这种事的效率大大提高，只需要将图片上传到搜索引擎，便可以以图找图，实现以前不可能完成的事。

用Chrome开发识图插件，将借助搜索引擎完成图片的搜索，用户所需要做的，仅仅是点击一下按钮选择图片，就可以得到所有关于该图片的信息。中间省去了用户保存图片，到相关网站提问，等待有人来回答这些过程，大大提高了查找效率。并且Chrome使用Google V8的JavaScript引擎，加速了JavaScript的运行，大大提高了使用效率。

1. 开发环境及工具

开发系统：Windows 10，Ubuntu Linux，OS X EI Capitan

开发语言：HTML5，CSS3，JavaScript，NodeJS，Chrome API

应用平台：Google Chrome V50 浏览器稳定版

后台技术：Asynchronous Javascript And XML（AJAX）

• 1. 主要开发语言介绍

JavaScript是一种编程语言，解析的方式使用的是解释执行而不是编译执行，常用于web开发中，用于添加一些动态的网页效果。一般JavaScript脚本是嵌入在HTML中来运行的，以下是JavaScript的一些特点。 

1. 是解释性脚本语言（代码直接解释运行而不是编译成机器语言）。 
2. 主要用途是向HTML添加一些网页效果，进行与后台的交互功能。 
3. 可以直接嵌入HTML页面，一般常用单独的JS文件做到逻辑分离。 
4. 可移植和跨平台，市面的绝大数浏览器都支持，可以在各种平台或系统下运行（Android、IOS、Linux、Windows等）。

Javascript脚本语言和所有编程语言一样有自己的语法和数据类型。Javascript有6种数据类型，其中有基本的数据类型boolen，string，number，undefine和null还有一种复杂的Object类型。Js的变量用来存放数据，函数等表达式用来运算。

JavaScript通常情况下被默认为只能做前端开发，而近几年前端技术的火热发展，使得JavaScript成为一种全栈开发语言。NodeJS便是用JavaScript开发后端的载体。它使用的是和Chrome一样的V8引擎，将JavaScript的解释执行方式变成了编译执行，JavaScript经由V8编译成机器语言，成倍的提高了运行的效率。

语言只是一种工具，而实现的功能使人们自己开发的，在浏览器插件开发方面有很多语言，但是JavaScript在用于Chrome开发效率肯定是排在第一的。^{[1][2][3](P21)}

• 1. 应用平台介绍

Google Chrome是谷歌公司开发的一款高性能、轻便的网页web浏览器。

Google Chrome浏览器的特点是简单和快速。Google Chrome和大多数浏览器一样支持多标签浏览，每个标签页面都在独立的“SandBox”里运行，相当于是多线程执行，不但提高了安全性，而且任意一个标签页的崩溃并不会影响其余标签的正常运行。此外，Google Chrome基于更强大的JavaScript V8引擎，这是和目前所有浏览器拉开差距的地方。

Chrome在全球的市场份额和用户数都是遥遥领先的。Chrome浏览器的内核是开源引擎WebKit、Blink，其中还包含了谷歌Gears。Chrome浏览器也具备无痕隐私浏览模式，可以让用户无需在本地机器上登录即可使用，这个功能可以很好的防止隐私泄露以及网站读取本地存储或是cookies信息，保证用户的浏览和信息安全。

Google在后期发布的版中加入网络语音API（Web SpeechAPI），可以让用户在一些网站中语音识别和听写等功能。同时新版本在内容安全策略标头（Content Security Policy header）方面也有所改进，开发者可以创建网页、资源白名单，以此来提升浏览器的安全性。

Chrome正是由于其强大的插件功能，稳居浏览器界的霸主。

Chrome插件是一种用前端开发语言HTML，CSS，和JavaScript所写的应用程序，这种程序不需要经过编译，通过浏览器便可解释执行。它可以在任何页面上执行，而Google的

V8引擎将JavaScript直接翻译成机器语言，从底层执行大大提高了速度。^[4](P21)

• 1. AJAX技术介绍

AJAX是“异步JavaScript和XML”的缩写，这是一种创建网页交互局部刷新加载的技术。

以往情况下前后端的交互使用过全局刷新和表单的方式，这种方式的缺点是需要重新加载网页，影响网页的浏览效果以及加重了服务端的负担。每次刷新页面前端都会向服务器获取所有的请求，面对大流量时很容易造成网路的阻塞。而使用AJAX技术则正好解决了这个问题，AJAX通过异步加载的方式，不会影响网页的正常加载。当数据改变时，只需要向后端请求改变的部分，后端回复后只重新加载改编的部分就可以了，大大减少了服务端的负载。该插件使用AJAX技术完成图片的上传以及图片与搜索引擎的交互。

AJAX不是一种新的编程语言，而是一种解决现有交互问题和前端阻塞问题的编程解决方案。AJAX的核心技术是XMLHttpRequest对象，这个对象可以在不刷新网页的情况下更新数据，直接向服务端请求和接收数据，还可以在后端向后端直接发送数据。AJAX 在浏览器里使用的JavaScript的一种高级编程技术回调，这种技术可以不阻塞当前浏览器脚本的执行，而AJAX得到返回的时候在执行回调函数。解决了以往因为网速和带宽的原因导致的网页卡死等问题。局部刷新技术使用的带宽很小，因为网页从服务器请求少量的信息，而不是整个页面，可以说是前端技术的一个里程碑。

剩余内容已隐藏，请支付后下载全文，论文总字数：16602字

相关图片展示：