Cobrowse插件开发与使用指导

使用浏览器插件原因

用户侧在使用网页协同功能打开第三方网页时（无论坐席侧发起还是用户侧发起），若第三方网页本身未引入cobrowse.js，将无法使用网页协同相关功能，可通过浏览器插件将cobrowse.js引入到第三方网页。

浏览器插件使用方：用户侧。

浏览器插件demo下载

https://bbs.huaweicloud.com/forum/thread-0206111661125233006-1-1.html

浏览器插件开发指导

以下demo（下载地址见浏览器插件demo下载）供第三方网站开发人员参考，若无特殊需求，按如下说明修改“aiccDomain”参数即可完成一个可用的插件。

demo文件列表：

文件说明与代码示例：

cobrowse.png
插件图标文件，可根据需要自行替换。

content_script.js

以下为content_script.js样例代码，“aiccDomain”参数需要替换为真实的云客服域名，其他代码不需修改。

function loadCoBrowseJS() {
const urlParams = new URLSearchParams(window.location.search.replace(/&amp;/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();

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
}

options.html

不需修改。

<html>
<head>
<title>AICC Cobrowse Options</title>
<script src="content_script.js"></script>
</head>
<body>

<div class="aicc-cobrowse">

</div>

</body>
</html>

浏览器插件的发布

第三方网站在完成插件的开发后，需要将插件发布到公网上，供用户下载和安装，并最好向用户说明浏览器插件的安装方法，使用户能正确安装插件，安装说明可参考本文档下一条。

浏览器插件的安装

用户根据网站提供的下载路径，下载插件，并解压缩。
打开google chrome浏览器，点击右上方侧下拉按钮，选择“更多工具>扩展程序”。
打开浏览器开发者模式。点击已解压的扩展程序，选择已解压并且修改配置后的插件文件。
页面显示以下信息即安装成功。

插件的使用及效果展示（以座席侧发起为例）

座席侧与用户侧接入web渠道。
- 座席侧：
- 用户侧：
座席侧点击右边工具栏，选择“网页协同地址”。
选择需要网页协同的网址（网址在“配置中心 > 资源管理 > 在线交谈多媒体库”菜单中配置），点击发送按钮。
座席点击发送按钮后，用户侧会收到请求卡片，用户可点击“同意”或“拒绝”。
用户同意后，用户侧会在浏览器打开第三方网站。
同时，座席侧会在系统中通过页签形式打开第三方网站。
双方可在第三方网页上进行网页协同操作。
若座席侧未安装插件，座席侧的网页协同页签将无法正常展示第三方网站，用户侧打开的第三方网站将无法正常使用网页协同功能（右下角未出现网页协同功能的相关图标），如下图：