|
通过在网上查找了好多资料，最后终于开发出来我的第一个浏览器插件。这个插件的主要功能：自动加载查重插件。之前，查重插件的加载都是通过手动点击查重按钮，然后加载查重插件来实现的。现在，在浏览器中自动加载查重插件。即：每次打开浏览器自动加载查重插件。 ------------------------------------------------------------------------------------------------- 浏览器加载查重插件效果： ---------------------------------------- 1.在浏览器中输入：https://crm./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./" ], // "content_security_policy":"script-src 'self' https://extensions.; object-src 'self'", "content_scripts": [{ "matches": ["https://crm./*"], "js": ["test.js"], "run_at": "document_end"//, // "all_frames": true }] } ================================
源文档 <http://www.cnblogs.com/dudu/archive/2012/11/22/chrome_extension.html>
Browser action 图标推荐使用宽高都为19像素，更大的图标会被缩小。 你可以用两种方式来设置图标: 使用一个静态图片或者使用HTML5canvas element。 使用静态图片适用于简单的应用程序，你也可以创建诸如平滑的动画之类更丰富的动态UI(如canvas element)。 静态图片可以是任意WebKit支持的格式，包括 BMP，GIF，ICO，JPEG或 PNG。 修改browser_action的manifest中 default_icon字段，或者调用setIcon()方法。
修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串；点击Internationalization查看详情。
Browser actions可以选择性的显示一个badge— 在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。 因为badge空间有限，所以只支持4个以下的字符。 设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。
在你的browser action中添加一个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./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); ====================================== |
|
|
