通过在网上查找了好多资料,最后终于开发出来我的第一个浏览器插件。这个插件的主要功能:
自动加载查重插件。之前,查重插件的加载都是通过手动点击查重按钮,然后加载查重插件来实现的。现在,在浏览器中自动加载查重插件。即:每次打开浏览器自动加载查重插件。-------------------------------------------------------------------------------------------------
浏览器加载查重插件效果:
----------------------------------------
1.在浏览器中输入:https://crm.baihui.com/crm/CreateEntity.do?module=Leads地址
2.浏览器自动弹出对话框:
3.查重按钮加载成功
------------------------------------------------------------------------------------------------------------------------------------
下面具体介绍实现:
------------------------------------------------------
1.manifest.json文件
------------------------------------------------------
{
"name":"My First Extension",
"version":"1.0",
"manifest_version":2,
"description":"The first extension that I made.",
"browser_action":{
"default_icon":"icon_19_19.png"//,
//"default_title":"Google Mail",
// "default_popup":"popup.html" //
},
"permissions":[
"https://extensions.baihui.com/"
],
// "content_security_policy":"script-src 'self' https://extensions.baihui.com; object-src 'self'",
"content_scripts": [{
"matches": ["https://crm.baihui.com/*"],
"js": ["test.js"],
"run_at": "document_end"//,
// "all_frames": true
}]
}
================================
- 项目的html里面不可以直接写javascript代码
- Permissions:许可证,允许该插件访问的url
- content_scripts:定义自动加载的内容
- "matches": ["http://*/*","https://*/*"], 满足什么样的条件执行该插件
- "js": ["js/jquery-1.9.1.min.js", "js/test.js"],执行的js脚本
- "run_at": "document_start" 定义document开始加载时执行该脚本,run_at有算个值: document_start | document_idel | document_end
- "all_frames": true
- "content_security_policy":"script-src 'self' https://extensions.baihui.com; object-src 'self'", 如果在Extenstion中引用了外部的js文件,会引发这样的错误,需要添加这段脚本。
源文档 <http://www.cnblogs.com/dudu/archive/2012/11/22/chrome_extension.html>
-
- 用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展,一个browser action图标还可以有tooltip、badge和popup。
- 图标:
Browseraction 图标推荐使用宽高都为19像素,更大的图标会被缩小。
你可以用两种方式来设置图标:使用一个静态图片或者使用HTML5canvas element。使用静态图片适用于简单的应用程序,你也可以创建诸如平滑的动画之类更丰富的动态UI(如canvas element)。
静态图片可以是任意WebKit支持的格式,包括BMP,GIF,ICO,JPEG或 PNG。
修改browser_action的manifest中default_icon字段,或者调用setIcon()方法。
- ToolTip:
修改browser_action的manifest中default_title字段,或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串;点击Internationalization查看详情。
- Badge:
Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges可以很简单的为browser action更新一些小的扩展状态提示信息。
因为badge空间有限,所以只支持4个以下的字符。
设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。
- popup:如果browser action拥有一个popup,popup 会在用户点击图标后出现。popup 可以包含任意你想要的HTML内容,并且会自适应大小。
在你的browseraction中添加一个popup,创建弹出的内容的HTML文件。修改browser_action的manifest中default_popup字段来指定HTML文件, 或者调用setPopup()方法。
====================================================
2.test.js文件:使用js文件加载。即:讲当前的js文件加载到主文件中。
----------------------------------------------
//创建一个script元素
var setting=document.createElement('script');
//window.Settings对象将在下面的client.js文件中使用到
setting.innerHTML="window.Settings={crmkey:'luoxiaoli_bingze@163.com',Leads:{search:['LEADCF3','Email','LEADCF2','Mobile','Company','Last Name','LEADCF1','Phone']},Accounts:{search:['ACCOUNTCF1','Account Name','Phone','ACCOUNTCF2']},Contacts:{search:['Email','CONTACTCF2','Mobile','CONTACTCF1','Last Name','Phone']},Potentials:{search:['Potential Name','POTENTIALCF1','POTENTIALCF2']}};";
document.body.appendChild(setting);
//在页面添加一个script元素,自动加载script脚本
var s=document.createElement('script');
s.id='_dupcheck_loader';
s.src='https://extensions.baihui.com/crmdupcheck/client.js';
document.body.appendChild(s);
======================================================
3.popup.html文件,这个文件是当点击插件按钮时弹出一个新的页面。在这个页面中可以实现一定的功能。效果如下:
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<!--<script src="popup.js"></script>
ipt type="text/javascript" src="test.js"></script>-->
</head>
<body>
测试成功
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
======================================
4.Popup.js文件
var img = new Image();
img.src = "1.jpg";
document.body.appendChild(img);
var img2 = new Image();
img2.src = "2.jpg";
document.body.appendChild(img2);
======================================