# Cobrowse插件开发与使用指导
#### 使用浏览器插件原因
用户侧在使用网页协同功能打开第三方网页时（无论坐席侧发起还是用户侧发起），若第三方网页本身未引入cobrowse.js，将无法使用网页协同相关功能，可通过浏览器插件将cobrowse.js引入到第三方网页。
浏览器插件使用方：用户侧。
 #### 浏览器插件demo下载
https://bbs.huaweicloud.com/forum/thread-0206111661125233006-1-1.html
#### 浏览器插件开发指导
以下demo（下载地址见[浏览器插件demo下载]）供第三方网站开发人员参考，若无特殊需求，按如下说明修改"aiccDomain"参数即可完成一个可用的插件。
1. demo文件列表： ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001500220513.png)
   
2. 文件说明与代码示例：
   1. cobrowse.png 插件图标文件，可根据需要自行替换。
      
   
   2. content_script.js 以下为content_script.js样例代码，"aiccDomain"参数需要替换为真实的云客服域名，其他代码不需修改。
      ```
      function loadCoBrowseJS() {
      const urlParams = new URLSearchParams(window.location.search.replace(/&/g, "&"));
      const isShareUrl = urlParams.get('cobrowse_share_url');
      if (!isShareUrl) {
      return;
      }
      let innerScript = document.createElement("script");
      innerScript.type = "text/javascript";
      if (typeof (onJSLoadSuccess) != "undefined") {
      innerScript.readyState ? innerScript.onreadystatechange = function () {
      if (innerScript.readyState == "loaded" || innerScript.readyState == "complete") {
      innerScript.onreadystatechange = null;
      onJSLoadSuccess();
      }
      } : innerScript.onload = function () {
      onJSLoadSuccess();
      }
      }
      // AICC域名需要动态修改（可使用如下ip+port的形式，也可使用域名如：https://www.xxxxx.com）
      let aiccDomain = 'https://ip:port';
      innerScript.src = `${aiccDomain}/service-cloud/resource.root/cobrowse/sdk/cobrowse.js`;
      document.getElementsByTagName('head')[0].appendChild(innerScript)
      }
      function onJSLoadSuccess() {
      let injectedCode = '(' + function() {
      CoBrowse.initFromUrl();
      } + ')();';
      let script = document.createElement('script');
      script.textContent = injectedCode;
      (document.head || document.documentElement).appendChild(script);
      script.parentNode.removeChild(script);
      }
      loadCoBrowseJS();
      ```
      
   
   3. manifest.json 插件配置文件，不需修改。
      ```
      {
      "name": "AICC CoBrowse Plugin",
      "version": "1.0",
      "description": "Automatic integrate AICC Web CoBrowse.",
      "permissions": [
      "<all_urls>",
      "tabs"
      ],
      "browser_action": {
      "default_icon": "cobrowse.png",
      "default_title": "AICC CoBrowse"
      },
      "options_page": "options.html",
      "minimum_chrome_version": "14",
      "content_scripts": [
      {
      "matches": [
      "<all_urls>"
      ],
      "all_frames": false,
      "js": [
      "content_script.js"
      ]
      }
      ],
      "icons": {
      "16": "cobrowse.png",
      "48": "cobrowse.png",
      "128": "cobrowse.png",
      "256": "cobrowse.png"
      },
      "manifest_version": 2
      }
      ```
      
   
   4. options.html 不需修改。
      ```
      <html>
      <head>
      <title>AICC Cobrowse Options</title>
      <script src="content_script.js"></script>
      </head>
      <body>
      <div class="aicc-cobrowse">
      </div>
      </body>
      </html>
      ```
      
    
 
#### 浏览器插件的发布
第三方网站在完成插件的开发后，需要将插件发布到公网上，供用户下载和安装，并最好向用户说明浏览器插件的安装方法，使用户能正确安装插件，安装说明可参考本文档下一条。
#### 浏览器插件的安装
1. 用户根据网站提供的下载路径，下载插件，并解压缩。
2. 打开google chrome浏览器，点击右上方侧下拉按钮，选择"更多工具\>扩展程序"。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001499989121.png)
   
   
3. 打开浏览器开发者模式。点击已解压的扩展程序，选择已解压并且修改配置后的插件文件。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001499670105.png)
   
   
4. 页面显示以下信息即安装成功。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001450069304.png)
   
   
 
#### 插件的使用及效果展示（以座席侧发起为例）
1. 座席侧与用户侧接入web渠道。 
   - 座席侧： ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001691787285.png)
     
   
   
   
   - 用户侧： ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001643627526.png)
     
   
   
   
   
2. 座席侧点击右边工具栏，选择"网页协同地址"。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001449909552.png)
   
   
3. 选择需要网页协同的网址（网址在"配置中心 \> 资源管理 \> 在线交谈多媒体库"菜单中配置），点击发送按钮。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001450389156.png)
   
   
4. 座席点击发送按钮后，用户侧会收到请求卡片，用户可点击"同意"或"拒绝"。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001450229224.png)
   
   
5. 用户同意后，用户侧会在浏览器打开第三方网站。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001499989125.png)
   
   
6. 同时，座席侧会在系统中通过页签形式打开第三方网站。 
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001499670109.png)
   
   
7. 双方可在第三方网页上进行网页协同操作。 
   若座席侧未安装插件，座席侧的网页协同页签将无法正常展示第三方网站，用户侧打开的第三方网站将无法正常使用网页协同功能（右下角未出现网页协同功能的相关图标），如下图：
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001450069308.png)
   ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001499903329.png)