我可以使用chrome.devtools API访问JavaScript代码段吗?

编程入门行业动态更新时间:2024-10-08 07:32:39

本文介绍了我可以使用chrome.devtools API访问JavaScript代码段吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我想制作一个Chrome开发人员工具扩展程序，该扩展程序需要访问源代码"窗格中新添加的代码段.

chrome.devtools API是否可以访问代码段?

解决方案

是的，您可以通过 chrome.devtools.inspectedWindow API()

您可以跟踪

a)所有可用代码段的内容

b)每当添加新代码段及其内容

c)何时使用新内容更新了代码段

如何启用调试等，您必须启用实验性开发人员标志.

您可以将以下代码作为参考，也可以根据需要对其进行扩展.

manifest.json

您必须添加

"devtools_page":"devtools.html"，

代码到manifest.json文件

清单manifest.json

{"name":摘要演示"，"description":这演示了如何从Snippets API获取内容"，"devtools_page":"devtools.html"，"manifest_version":2，"version":"2"}

devtools.html

添加 devtools.js 以避免内联脚本

示例devtools.html

< html>< head>< script src ="devtools.js"></script></head><身体></body></html>

devtools.js

添加相关代码

a) chrome.devtools.inspectedWindow.getResources

b) chrome.devtools.inspectedWindow.onResourceAdded.addListener

c) chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener()

devtools.js示例

//获取所有可用资源并使用添加的脚本片段名称进行过滤chrome.devtools.inspectedWindow.getResources(function(resources){//此函数返回当前窗口中可用资源的数组for(i = 0; i< resources.length; i ++){//与当前代码段网址匹配if(resources [i] .url ==脚本片段#1"){resources [i] .getContent(function(content，encoding){alert("encoding是" +编码);alert("content is" + content);});}}});//这可用于识别何时添加新资源chrome.devtools.inspectedWindow.onResourceAdded.addListener(function(resource){alert(添加了资源" + resource.url);alert(添加的资源内容" + resource.content);});//这可用于检测资源代码何时被更改/更新chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource，content){alert(资源已更改");alert("New Content" + content);alert(新资源对象是" +资源);});

将所有3个代码放在一起后，您就可以得到

输出1)

输出2)

输出3)

希望这会有所帮助:)

I want to make a Chrome Developer Tools Extensions that needs access to newly added snippets in sources pane.

Does chrome.devtools API have any way to access snippets?

解决方案

Yes, you can do it through chrome.devtools.inspectedWindow API()

You can track

a) Content of all Snippets available

b) When ever a new Snippet is added and its content

c) When ever a Snippet is Updated with new content\modified.

How ever for enabling the debugging etc you have to enable experimental developer flags.

You can take following code as a reference and you can extend it as per your requirement.

manifest.json

You have to add

"devtools_page":"devtools.html",

code to your manifest.json file

Sample manifest.json

{ "name":"Snippets Demo", "description":"This demonstrates How to get content from Snippets API", "devtools_page":"devtools.html", "manifest_version":2, "version":"2" }

devtools.html

Add devtools.js to avoid inline scripting

Sample devtools.html

devtools.js

Add related code for

a) chrome.devtools.inspectedWindow.getResources

b) chrome.devtools.inspectedWindow.onResourceAdded.addListener

c) chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener()

Sample devtools.js

//Fetching all available resources and filtering using name of script snippet added chrome.devtools.inspectedWindow.getResources(function (resources){ // This function returns array of resources available in the current window for(i=0;i<resources.length;i++){ // Matching with current snippet URL if(resources[i].url == "Script snippet #1"){ resources[i].getContent(function (content,encoding){ alert("encoding is " + encoding); alert("content is "+content); }); } } }); //This can be used for identifying when ever a new resource is added chrome.devtools.inspectedWindow.onResourceAdded.addListener(function (resource){ alert("resources added" + resource.url); alert("resources content added " + resource.content); }); //This can be used to detect when ever a resource code is changed/updated chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource,content){ alert("Resource Changed"); alert("New Content " + content); alert("New Resource Object is " + resource); });

After putting all the 3 codes together you get

Output 1)