表浏览器扩展为D365:第2部分将Bookmarklet转换为浏览器扩展名

阅读时间:5分钟

分享:

在脸书上分享
分享到Twitter
分享LinkedIn.

本系列中的一部分,我们谈了如何Microsoft Dynamics 365财务和操作(D365FO)可以利用浏览器和基于Web的技术来增强和扩展D365FO功能。我们首先制作了一个JavaScript书签,它将我们的D365FO“Gold”环境水印并改变“Navbar”元素背景颜色。在第2部分中,我们将转换为Chrome浏览器扩展名的书签。这也可以为Opera和Firefox等其他浏览器完成。

我们的Chrome浏览器扩展名将包含两个文件。这两个文件都可以使用您的文本编辑器或IDE创建:

  1. 清单文件(Manifest.json)
  2. 内容脚本文件(Content.js)

创建清单文件(Manifest.json)

要创建Chrome浏览器扩展名,我们将首先创建一个清单文件,该文件定义了我们扩展名所需的名称和权限。清单是JSON文件(在这里下载代码),其格式在其中定义Chrome和Mozilla开发人员文档

示例2a masspest.json:

{

“manifest_version”:2,

“名称”:“D3F2GOLDFLAG”,

“版本”:“0.1”,

“权限”:[“选项卡”,

“ActiveTab”,

],

“content_scripts”:[

{

“run_at”:“document_idle”,

“匹配”:[“https:// [gold] .sandbox.operations.dynamics.com / *”],

“js”:[“content.js”]

}

]

}

示例2a中的清单说明我们将调用我们的扩展名“D3F2GOLDFLAG”,即在页面在与匹配的URL上达到“Doc​​ument_Idle”状态时,扩展名为“D3F2GOLDFLAG”以及浏览器运行内容JavaScript文件的权限。代码中的占位符[金]可以通过地址替换为黄金环境。

创建内容脚本(Content.js)

为了让Visual Studio IntelliSense了解Chrome API,首先下载IntelliSense文件并将注释添加到新的JavaScript内容.js文件的顶部:

/// <引用路径=“chrome.intellisense.js”/>

然后我们可以开始创建我们的内容脚本或多或少地从我们的书签中迁移函数:

var d = document,e = d.getelementByID(“纳瓦栏”);

E.Style.BackgroundColor =“红色”;

document.getElementById(“NavBardashboard_Label”)。innerhtml =

“D3FO黄金没有交易”;

在Chrome浏览器扩展设置中启用开发人员模式,然后加载新的未包装扩展名。有关入门的其他一些详细信息可以在其中找到Chrome浏览器扩展文档

加载扩展后,在D365FO页面上刷新F5将导致内容脚本执行。我们可以看到我们的书签如何移植,并不好。背景颜色在“导航栏”中更改,但我们的代码通知用户文本似乎没有影响。如果我们打开DevTools(Chrome中的F12)并重新加载页面,我们应该立即看到这个问题。我们的脚本未找到具有ID的节点:“NavBardashboard_Label”,因为页面尚未完成加载或创建它。

有一些不同的方式可以解决这个问题。我们使用了UmatationObserver在观察者找不到父节点的情况下检查存在“NavBardashboard_Label”节点和超时的接口。使用这些更新,我们现在可以侦听“NavBar”元素对其子项的更新,然后检查“NavBardashboard_Label”是其中之一,允许页面在尝试更改InnerHTML之前完成加载。

示例2b content.js.

var e = document.getElementByID(“纳瓦栏”);

if(typeof(e)!='未定义'&& e!= null){

var d = document,e = d.getelementByID(“纳瓦栏”);

E.Style.BackgroundColor =“红色”;

}

别的 {

console.log(“未能找到导航栏”);

}

//https://developer.mozilla.org/en-us/docs/web/api/mitigeobserver.

//观察突变时要执行的回调函数

var回叫=函数(变形列表,观察者){

for(变异列表的var突变){

if(mutation.type =='childlist'){

if(typeof(document.geteLementById(“NavBardashboard_Label”))!='未定义'){

document.getElementById(“NavBardashboard_Label”)。innerhtml =

“D3FO黄金没有交易”;

Observer.disconnect();

console.log('Nav Bar Label更新');

}

}

}

};

//创建观察者实例

var观察者= new mutationobserver(回调);

//检查节点和超时

//https://stackoverflow.com/questions/40398054/observe-on-mitigeobserver-parameter-1-is-not-of-type-node.

函数addobserverifdesirednodeavailable(){

var target = document.getElementByID(“纳瓦栏”);

如果(!目标){

//我们需要的节点尚不存在。

//等待500ms并再试一次

window.settimeout(addobserverifdesirednodeavailable,500);

返回;

}

var config = {属性:true,childlist:true,子树:真实};

if(typeof(target!='未定义')){

Observer.observe(目标,配置);

}

}

addobserverifdesirednodeavailable();

现在我们已经给了DOM有机会完成加载,我们的扩展应该具有预期的效果:

将BookMarklet转换为浏览器扩展名

在系列中的第三部分中,我们将扩展Chrome浏览器扩展的功能并使用D365FO元数据API。通过使用我们的浏览器扩展组合我们的元数据信息,我们可以简化打开D365FO表浏览器具有扩展

本出版物仅包含一般信息,依据本出版物,呈现会计,业务,财务,投资,法律,税务或任何其他专业咨询或服务,并不是。本出版物不是替代这些专业建议或服务,也不应该将其作为可能影响您或您业务的任何决定,行动或遗漏的基础。在做出任何决定之前,应采取任何行动或省略可能影响您或您业务的行动,您应该咨询合格的专业顾问。您承认,Sikich不得对您或任何依赖本出版物持续的任何人负责。

注册洞察188bet188asia

加入14,000多名商业管理人员和决策者

接下来的活动

最新见解188bet188asia

关于作者