Desidero creare estensioni per gli strumenti per gli sviluppatori di Chrome che richiedono l'accesso agli snippet appena aggiunti nel riquadro delle origini.Posso accedere a snippet JavaScript utilizzando l'API chrome.devtools?
L'API chrome.devtools ha un modo per accedere agli snippet?
Sì, è possibile farlo attraverso chrome.devtools.inspectedWindow API()
È possibile tenere traccia
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.
In ogni caso, per abilitare il debug ecc. È necessario enable experimental developer flags.
È possibile prendere il seguente codice come riferimento e è possibile estenderlo secondo le proprie esigenze.
manifest.json
È necessario aggiungere
"devtools_page": "devtools.html",
codice al file manifest.json
Esempio 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
Aggiungi devtools.js per evitare inline scripting
Esempio devtools.html
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>
devtools.js codice relativo
Aggiungi per
una)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);
});
Dopo aver messo insieme tutti i 3 codici si ottiene
uscita 1)
uscita 2)
Uscita 3)
Spero che questo aiuti :)
ero alla ricerca di questo, ma la risposta accettata è piuttosto vecchio e, a partire dal gennaio 2016, non è possibile accedere a frammenti via localStorage.
vedi anche:
https://github.com/bahmutov/code-snippets/issues/23
Which file does Snippets of Chrome Dev Tool saved at?
Grazie per la risposta dettagliata. Affidarsi all'URL delle risorse non è sicuro. L'utente può cambiare il nome dello snippet durante la creazione. Devo essere sicuro che la risorsa sia uno snippet. Non è davvero impossibile 'console.log' nello script. Il contesto di quello script non è la solita finestra. Funziona nel proprio contesto ('devtools.html'). Per accedere a devtools per quello script puoi raggiungere 'chrome: // inspect' per vedere quella pagina. Mentre questo è molto utile, non riesco ancora ad accedere solo ai frammenti. Qualche idea? – Mohsen
@Mohsen: Grazie per aver apprezzato, oltre al filtro 'resource.type == 'script'' non ci sono filtri specifici per gli snippet o Experimental API() disponibile fino alla data :( – Sudarshan