Menu
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?
215
Chrome. Open Chrome and navigate to the web page containing the JavaScript you want to view. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Chrome developer tools.
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 :)
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
