我可以使用chrome.devtools API访问JavaScript代码段吗? [英] Can I access JavaScript snippets using chrome.devtools API?
问题描述
我想制作一个Chrome开发人员工具扩展程序，该扩展程序需要访问源代码"窗格中新添加的代码段.
chrome.devtools API是否可以访问代码段?
是的，您可以通过 a)所有可用代码段的内容
.如何启用调试等，您必须启用实验性开发人员标志.
您可以将以下代码作为参考，也可以根据需要对其进行扩展.
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
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</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)
Output 2)
Output 3)
Hope this helps :)
这篇关于我可以使用chrome.devtools API访问JavaScript代码段吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
