chromephp插件开发

① 如何将 Chrome 变成开发利器，开发者们在用这些插件

你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快，比如压缩和CDN，但是让代码执行的更快你要做的事情。代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇文章告诉你如何通过用Chrome开发者工具（ChromeDeveloperTools）找到这几行关键的代码。设置一个基线我们来看一个简单的“颜色排序器”应用，这个应用展示了一个由各种颜色构成的网格，你可以拖拽这些颜色进行混合。每一个点都是一个div标签加上一些让它看起来是圆的的CSS。生成这些颜色是需要技巧的，所以我借助了””。页面载入的很快，但还是花费了一些时间，在渲染之前还闪了一下。是时候对这个页面进行性能分析让它更快了。在开始做性能优化的时候要设置一个基线，来明确这个页面的速度到底怎样。这个基线可以让你知道自己是否做了优化并帮助你权衡利弊。在这片文章里我们要使用chrome开发者工具。性能分析器(profiler)是chrome开发者工具的一部分，点击小扳手下面的工具菜单就可以打开它。Firebug也有一些性能评测工具，但是webkit内核的浏览器（chrome和safari）在对代码进行性能分析和展示时间线方面是最棒的。Chrome还提供一种很棒的事件跟踪工具，叫做speedtracer。在时间线(timeline)标签下开始记录，载入页面然后停止记录，这样就设置了一个基线。（打开chrome开发者工具，点击“时间线”标签，然后点击窗口底部圆形的黑色“记录”图标开始记录）。chrome是很智能的，只有页面开始载入的时候才会开始记录。我记录了三次然后取了平均值，以防我的电脑在第一次测试的时候运行的很慢。我的平均基线，也就是从第一个请求到页面全部渲染结束所花费的时间是1.25秒。这个时间不是太长，但是对于这样一个小的页面来说也不算好。我想让代码执行的更快，但是我并不知道是什么让它慢下来的。性能分析器(profiler)帮助我找到原因。创建一个Profile时间线(timeline)告诉我们代码运行花费的时间，但是并没有帮助我们知道代码运行的时候发生了什么。我们可以做一些改动然后不断的测每次代码运行的时间，但这是盲目的。profiles给我们提供了更好的方法。profiler告诉我们哪些函数的执行占用了大部分时间。让我们切换到chrome开发者工具的“Profiles”标签页开始性能测试，这里一共提供了三种类型的性能测试。1、javascriptcpu性能测试显示javascript占用了多少CPU2、css选择器性能测试显示处理CSS选择器占用的CPU3、堆栈快照显示javascript对象的内存占用情况我们想要javascript代码执行的更快，所以我们进行CPU性能测试。我们开始性能测试，刷新页面然后停止。通过性能分析首先知道很多函数在执行。“颜色排序器”使用了jQuery和jQueryUI,来处理些管理插件和解析表达式之类的事情。我发现列表最顶端的是decimalToHex和makeColorSorter两个函数。这两个函数占用了CPU13.2%的时间，这是做优化的好地方。我们可以点击函数调用旁边的“下一个”箭头来查看完整的函数调用堆栈。后，可以看到decimalToHex是被makeColorSorter调用的，makeColorSorter是通过$(document).ready调用的。代码如下$（document）.ready（function（）{makeColorSorter（.05，.05，.05，0，2，4，128，127，121）;makeSortable（）;}）;弄清楚这两个函数是哪里调用的，也就弄清楚了让颜色可以排序并不是最大的性能问题。通常情况下性能问题都是由多余的排序操作造成的，但是在我的代码中相比与排序增加DOM元素花费了时间。我想要让这些函数执行的更快，但是首先我想要将我的改动区隔开。在页面载入过程中会发生很多事情，我不想要这些影响到我的性能分析。区隔问题我做了第二个版本，这个版本中“颜色排序器”在我点击按钮之后才载入，而不是在documentready的时候载入。这就把文档载入的过程分离出去，让我可以只对颜色分类进行性能测试。调完性能之后我可以立刻改回去。让我们调用新的函数testColorSorter并把它绑定到一个可点击的按钮上。functiontestColorSorter（）{makeColorSorter（.05，.05，.05，0，2，4，128，127，121）;makeSortable（）;}Clickme在我们进行性能分析之前改变应用可能导致意外的结果。这个改动看起来很安全，但是我还是要重新运行性能检测器来看看我是不是无意中改变了什么。我会开始一次新的性能分析，点击应用中的按钮然后停止。我首先注意到decimalToHex函数的载入只占用了4.23%的时间。这是代码执行花费时间最多的地方。我们创建一个新的基线来看看这个方案对代码有多大的优化。有些事件在我点击按钮之前有触发了，但是我只关注从我点击鼠标到浏览器渲染“颜色排序器”花费的时间。鼠标在390毫秒时点击，渲染事件在726毫秒处被触发。726减去390得到我的基线336毫秒。和第一个基线一样我重复了3次来取平均值。这时，我知道如何获得并且得到了代码确切的运行时间，我们已经准备好开始解决问题了。让代码更高效性能分析器只告诉我们哪个函数造成的问题，所以我们要查看下函数的源码来了解函数做了些什么。functiondecimalToHex（d）{varhex=Number（d）.toString（16）;hex=“00”.substr（0，2-hex.length）+hex;console.log（‘converting’+d+‘to’+hex）;returnhex;}“颜色排序器”中的每一个颜色点都有一个16进制的色彩值，例如#86F01B和#2345FE.这些值表示一种颜色中红，绿，蓝三原色各自的数值。例如的背景色是#2456FE,代表红色的值是36，绿色的值是86，蓝色的是254，每一个数值必须是0到255之间的。decimalToHex函数把这用RGB值表示的颜色转化为页面中我们使用的16进制颜色。这个函数十分的简单，但是我还是留下了一个可以去掉的调试代码console.log在那里。decimalToHex函数还在数字之前加上了补位。这是很重要的一点，因为有些10进制数字对应的是1个16进制数字。比如十进制中的10对应着16进制中的C，但是在CSS中需要一个两位数。为了让这个进制换算更快速，我们让这段代码不是那么泛化。我知道每个需要补位的数字长度都为1，所以我们可以这样重写这个函数。functiondecimalToHex（d）{varhex=Number（d）.toString（16）;returnhex.length===1？‘0’+hex：hex;}第三个版本的“颜色排序器”只有在需要补位的时候才改变字符串，并且不用调用substr函数。有了这个新函数，运行时间是137毫秒。再次对代码进行性能测试，可以发现decimalToHex函数只占用了总时间的%0.04,到了列表的下部。我们还可以发现占用CPU最多的函数是jQuery的e.extend.merge。我不知道这个函数的作用，因为代码是压缩过的。我可以使用开发版本的jQuery，但是我发现这个函数是被makeColorSorter调用的。所以下一步我们先让这个函数执行的更快。减小改动“颜色排序器”中的多彩颜色是用过正弦曲线生成的。在光谱中设置一个中心点，然后以一定的偏移来创建这个曲线。这就把颜色变成了一个“彩虹模型”。我们还可以通过改变红绿蓝三原色的使用频率来改变颜色。functionmakeColorSorter（frequency1，frequency2，frequency3，phase1，phase2，phase3，center，width，len）{for（vari=0;i<len;++i）{varred=Math.floor（Math.sin（frequency1*i+phase1）*width+center）;vargreen=Math.floor（Math.sin（frequency2*i+phase2）*width+center）;varblue=Math.floor（Math.sin（frequency3*i+phase3）*width+center）;console.log（‘red：’+decimalToHex（red））;console.log（‘green：’+decimalToHex（green））;console.log（‘blue：’+decimalToHex（blue））;vardiv=$（‘’）;div.css（‘background-color’，‘#’+decimalToHex（red）+decimalToHex（green）+decimalToHex（blue））;$（‘#colors’）.append（div）;}}我们要去掉console.log函数。这些调用非常的糟糕，因为每次执行都会调用decimalToHex函数，这意味着decimalToHex函数会被多调用2倍的次数。这个函数大幅度的改变了DOM结构。每次循环，都向id为colors的div中添加一个新的div。这就让我怀疑这就是e.extend.mergefunction做的事情。用性能分析器做一个小实验就可以搞清楚。我想要一次把所有的div添加进去，而不是在每个循环中添加一个新的div。创建一个变量来存储数据，然后在最后一次性添加进去。functionmakeColorSorter（frequency1，frequency2，frequency3，phase1，phase2，phase3，center，width，len）{varcolors=“”;for（vari=0;i<len;++i）{varred=Math.floor（Math.sin（frequency1*i+phase1）*width+center）;vargreen=Math.floor（Math.sin（frequency2*i+phase2）*width+center）;varblue=Math.floor（Math.sin（frequency3*i+phase3）*width+center）;colors+=‘’;}$（‘#colors’）.append（colors）;}这个小改动意味着DOM只在添加所有div的时候做一次改变。用时间线进行测试，我们发现从点击到渲染花费了31毫秒。这个dom变动，使得第四个版本的运行时间降低了86%。我可以再次打开性能分析器(profiler)，发现e.extend.merge函数占用了很少的时间，在列表中已经看不到它了。我们还可以完全移除decimalToHex函数让代码更快一点。因为CSS支持RGB颜色，所以我们不需要把他们转换到16进制。现在我们可以这样写makeColorSorter函数。functionmakeColorSorter（frequency1，frequency2，frequency3，phase1，phase2，phase3，center，width，len）{varcolors=“”;for（vari=0;i<len;++i）{varred=Math.floor（Math.sin（frequency1*i+phase1）*width+center）;vargreen=Math.floor（Math.sin（frequency2*i+phase2）*width+center）;varblue=Math.floor（Math.sin（frequency3*i+phase3）*width+center）;colors+=‘’;}$（‘#colors’）.append（colors）;}第五个版本的执行只用了26毫秒而且代码行数从28行减少到18行。在你的应用中进行Javascript性能分析实际工作中的应用要比“颜色排序器”复杂的多，但是做性能分析要遵循同样的基本原则1、设置一个基线，这样你就知道你是从何处开始的。2、把问题从应用的其他代码隔离出来。3、在一个可控的环境下进行优化，频繁的使用时间线（timelines）和性能分析器（profiles）还有一些性能优化的准则1、从最慢的部分开始，这样在时间优化上可以得到最大的提升。2、控制环境。如果你换了电脑或者做了任何大的改动，都要设置新的基线。3、多次分析以防你电脑的异常导致得到不正确的结果。每个人都想要他的网站更快，你必须开发新的功能，但是新的功能通常会让网站更慢。所以花费时间来做性能优化是有价值的。性能分析和优化使得最终版颜色分类器的执行时间减少了92%。你的网站可以变快多少？英文原文：ZackGrossbart，编译：伯乐在线——王筱文章来源：伯乐在线注：相关网站建设技巧阅读请移步到建站教程频道。

② Chrome的插件要怎么开发我上一些网站，发现插件会自动使用，完全没有经过我的允许，这和IE的ActiveX不

chrome开发用的是javascript,360急速浏览器上有翻译的完整教程,javascript 没有访问本地文件的权限,但安全隐患还是有的,比如隐私泄露,这个就要自己注意了

③ chrome插件怎么开发

方法/步骤：

首先，我们创建一个文件夹，用于存在Chrome应用（扩展）所需要的所有文件。并在该文件夹中存放三个文件：
其中 icon.png文件是一个像素为32*32的图标，用于显示插件的图标
manifest.json文件用于对插件进行描述
popup.html文件是一个弹窗网页文件，用于在点击插件图标后显示一个窗口。

接下来编写“manifest.json”文件的内容如下，如图：
{
"name": "My First Extension",
"version": "1.0",
"manifest_version":2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup":"popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}

对“popup.html”网页文件进行如下内容编辑：
<html>
<body >
<h4 style="text-decoration:underline">网络ID</h4>
<font color=red>feifeidown</font>
</div>
</body>
</html>

最后来测试一下该插件：
打开Chrome浏览器，点击“菜单”按钮，从弹出的扩展菜单中选择“工具”->“扩展管理”项。

在打开的新页面中，勾选“开发者模式”，点击“加载正在开发的应用扩展”按钮。

从打开的“浏览文件夹”窗口中，选择插件所在的文件夹，点击“确定”按钮。

此时该插件就正式启动了。

点击浏览器右侧的插件图标，就弹出窗口并显示其中的内容。至此，Chrome浏览器插件开发完成。

详见网络经验：
http://jingyan..com/article/ea24bc39ba3adcda62b331cb.html

④ 用什么工具开发chrome插件

创建一个单独的文件夹，起个名字，比如说我们为网络贴吧开发一个插件，就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件，在里面写上如下的样子。
{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"},
"permissions": [http://*/*]
}
这里各项的意义很显然可以通过名字得之，
接着你需要找一个图标，放在这个目录下，名字叫icon.png，当然，这个名字只要和上面的配置文件里default_icon的属性一致就好。
现在，只要点击Chrome工具条的菜单按钮选择里面的工具（Tools）>> 扩展（Extensions）就好。

选择开发者模式，选择加载未打包的插件，然后，选择第一步中的那个文件夹即可。接着启动插件。

在地址栏的右侧出现了图标，但是点击图标却什么也没做，这是自然地，因为我们还什么代码没有写。现在在那个目录下，建立一个html文件，并且名字为popup.html，同时在配置文件里“browser_action”下加上一条："popup": "popup.html"。示范：
{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"，"popup": "popup.html"},
"permissions": [http://*/*]
}
此处注意，每一对大括号里的最后一项后面都没有逗号，其余的每项之间必须用逗号间隔！哪怕是browser_action这样复合的项目，在他的大括号后也要有逗号。
在Popup.html里写上一些html代码，比如简单的输出HelloWorld也好，这个Popup.html和普通的html文件按没有任何差别。

7
这就是基本的插件制作方法了。

⑤ 开发chrome插件需要哪些知识（我会VB.NET，利用webbroser对网页进行一定操作，但是IE内核是硬伤）

开发 Chrome Extension（扩展）需要具备前端知识：Javascript ／ Css ／Html
剩下的成本就是熟悉官方的 API。
国内有翻译的官方文档，搜狗／360 都有翻译版本供参考。

⑥ 怎样编写Chrome浏览器的插件

请参阅扩展开发文档中文版：

http://open.chrome.360.cn/extension_dev/overview.html

由于开发者文档内容较多，无法全部提交到回答中，遂概括为以下几点：

1. 基本概念

2. 应用（扩展）的界面

3. WebApp界面

4. 文件

5. 引用文件

6. 基本架构

7. 页面

8. Content scripts

9. 页面间的通信

10. 保存数据和隐身模式

11. 后续

⑦ 如何Chrome插件开发和打包后的id忠恢

这个文件夹下面有你安装过的扩展，记得先把电脑隐藏文件夹显示出来，否则找不到，然后打包你需要的插件：打开chrome的设置，在里面点开扩展程序，选中开发者模式，你安装的插件的下面会出现一个ID，这个ID对应的就是你要打包的插件，然后打包扩展程序

⑧ 如何制作chrome浏览器插件

方法如下：

1、创建一个单独的文件夹，比如说为网络贴吧开发一个插件，就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件，在里面写上如下的样子。

{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"},
"permissions": [http://*/*]
}

2、现在需要找一个图标，放在这个目录下，名字叫icon.png，当然，这个名字只要和上面的配置文件里default_icon的属性一致就好。

3、现在只要点击Chrome工具条的菜单按钮选择里面的工具（Tools）>> 扩展（Extensions）就好。菜单按钮如右图。

4、选择开发者模式，选择加载未打包的插件，然后，选择第一步中的那个文件夹即可。

5、在地址栏的右侧出现了图标，但是点击图标却什么也没做，因为我们还什么代码没有写。现在在那个目录下，建立一个html文件，并且名字为popup.html，同时在配置文件里“browser_action”下加上一条："popup": "popup.html"。

示范：

{
"name": "TiebaAddin",
"version": "1.0",
"description": "An addin for Tieba.",
"browser_action": {"default_icon": "icon.png"，"popup": "popup.html"},
"permissions": [http://*/*]
}
此处注意，每一对大括号里的最后一项后面都没有逗号，其余的每项之间必须用逗号间隔！哪怕是browser_action这样复合的项目，在他的大括号后也要有逗号。

6、在Popup.html里写上一些html代码，比如简单的输出HelloWorld也好，这个Popup.html和普通的html文件按没有任何差别。

7、这就是基本的插件制作方法。

⑨ PHP,CSS做网站选择哪个浏览器和哪些插件

浏览器。
用chrome
，现在chrome的自带的开发工具可以模拟各种流行的移动设备的分辨率。
响应试。现在流行的响应式框架。比如bootstrap，
国产盗版的zui
之类的。google一下，有很多。
你指的原来浏览器是指ie8以前的版本？
现在随着国产浏览器的推广（比如360之类的），这些国产马甲浏览器大部分都基于chromium（webkit）内核的，在国内他们的市场份额是比较大，
所以关于浏览器的兼容性，可以慢慢的边缘化ie系列。FF，
chrome，
Safari
这三个浏览器应该以各种形式（主要是chrome的马甲国产浏览器）
占据了很大市场（可以去查国内2013年的浏览器份额)，这些浏览器的html5,
css3
都是支持比较好的了。

4.
对于流量大型的网来说
(比如芒果tv)
，它的移动端，和pc端是分开做的。通过对http
agentt数据的判断，直接DNS解析到不同服务器。为什么这么做？
因为pc的交互体验要比移动端要丰富一些，自然加载的资源文件，js，css
这些都是比移动段要多的，移动端的网络状态根本不允许你加载过多文件，需要控制网络流量。因此，对于所谓的相应式，只是适用于小浏量网站，可以节约开发成本。