google-chrome - 我可以使用 chrome.devtools API 访问 JavaScript 片段吗？-6ren

google-chrome - 我可以使用 chrome.devtools API 访问 JavaScript 片段吗？

转载作者：行者123 更新时间：2023-12-02 08:30:50

25

4

我想制作一个 Chrome 开发者工具扩展，需要访问源 Pane 中新添加的代码片段。

chrome.devtools API 有什么方法可以访问代码片段吗？

enter image description here

最佳答案

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

您可以跟踪

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.

如何启用调试等，您必须 enable experimental developer flags .

您可以引用以下代码，并可以根据您的要求进行扩展。

manifest.json

您必须添加

"devtools_page":"devtools.html",

将代码写入您的manifest.json 文件

示例 list .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

添加devtools.js以避免 inline scripting

示例 devtools.html

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

devtools.js

b) chrome.devtools.inspectedWindow.onResourceAdded.addListener

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

示例 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);
});

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

输出 1)

enter image description here

输出 2)

enter image description here

输出 3)

enter image description here

希望这有帮助:)

关于google-chrome - 我可以使用 chrome.devtools API 访问 JavaScript 片段吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13653047/

25

4

0

文章推荐： Java类的继承

文章推荐： docker - 无法在 docker 容器中找到 apt-get 包

文章推荐： R gam 和 mgcv 之间的包冲突？

自动完成中未使用 Xcode 片段
我已将重要信息加粗以使其更易于阅读。我昨天刚刚更新到Xcode 7.3并且一整天都在尝试解决我的问题。对于类(class)，我们用 C 编程并使用 SVN 修改我们所有的文件以创建我们的项目。我使
URL 片段 (#) 允许的字符
在互联网上进行了一些挖掘之后，我无法找到一个很好的答案来说明我可以将哪些字符用于 URL 片段。我正在编写一个 javascript 脚本，它将利用 URL 片段。我想让 URL 看起来不那么复杂，
每个关键帧中带有标题的 MP4 片段
我正在尝试在分段文件(styp)的 mp4 容器中定位 h264 帧。对于分割，我目前使用 MP4Box dash。我使用 MP4Box 解析器，我注意到在每个关键帧(IDR)中样本的大小与原始文件中
jquery - 片段 - 淡入然后淡出
我想要一个自定义片段动画，以便它们淡入右/淡入左，然后在短暂延迟后淡出。假定所有片段都具有类 .visible 和 .current-fragment。我以为我可以在短暂的延迟后删除类 .visibl
C# Autolevel 片段？
有没有人看到过在 C# 中自动调平图像的任何好的片段？最佳答案参见 http://code.google.com/p/aforge/ 关于C# Autolevel 片段？，我们在Stack O
controls - 如何从控件获取父 View /片段
如何检索 View 所属的 Fragment/sap.ui.core.Control？ BR 克里斯最佳答案如果您的控件的标识符包含 View 的标识符(如果您使用的是 XML View ，则类似
lua - 试图理解这个 lua 片段
我试图了解这个函数的作用。任何人都可以向我解释这一点吗？ function newInstance (class) local o = {} setmetatable (o, clas
dependencies - 用于安装依赖项最新版本的 Nuspec 片段
简介根据 this documentation可以指定依赖项，包括每个包的版本，如下所示: 问题需要应用哪个 Nuspec 片段才能安装依赖项的最新版本？最佳答案不幸的是，您无法
graphql - 如何在多种类型上使用 GraphQL 片段
我有一个 Gatsby 项目，它对两种不同类型的内容进行了非常相似的 GraphQL 查询:常规页面和 wiki 文章。按蛞蝓页 export const query = graphql` q
jsp - 检查是否设置了 JSP 片段
我遇到了以下教程 JSP tricks to make templating easier?用于使用 JSP 创建页面模板(我怎么这么久都没有想到这个？!？)。但是，在进行了一些搜索之后，我似乎无法弄
模型的 Django HTML 片段
我是 Django 的新手，我试图找出如何将 HTML 片段与模型相关联。我的 HTML 片段只是一个 div。我想重用那个 div(你可以把它想象成一个缩略图) 情况是这样的:在我的主页中，我想显
Vim 片段，没有片段/模板插件
我经常使用 vim，但我的工作流程通常迫使我与其他 IDE 交互，所以我不是一个像上帝一样的 vim super 用户，我也不想很快成为。 Vim 不是我的 IDE，我也不希望它是。这是一款快速轻便的
如果前面的脚本失败，则执行或不执行 JavaScript 片段
我刚刚了解到一个关于在抛出错误时执行 Javascript 的重要事实。在我开始对此下结论之前，我最好验证一下我是否正确。给定一个包含 2 个脚本的 HTML 页面: 脚本1: doSometh
google-chrome - 片段-标识符已被声明
我是在Chrome片段中编写的: let myVar = someValue; 当我尝试第二次运行它时，它说该变量已被声明并在第一行引发错误。错误是: Uncaught SyntaxError: I
opengl - 同一程序中可以有多个像素(片段)着色器吗？
我想要两个像素着色器；首先要做一件事，然后再做其他事情。这是可能的，还是我必须将所有内容打包到一个着色器中？最佳答案您可以这样做，例如通过从主入口点对在各种着色器对象中实现的函数进行函数调用。 m
syntax-error - 有条件的情况下如何正确使用加法？片段
我正在尝试检查汽车前面是否有任何障碍物。假设汽车在位置“2”。我的目标是检查位置“3”处是否有障碍物。可能没有明确的障碍事实，这意味着在特定位置没有障碍。我检查使用是否存在有条件。但是在规则 r6
javascript - 在文本区域内添加 Javascript 片段
我想在文本区域内编写一个 JavaScript，而不运行 JavaScript。显示为一些可复制的文本。我使用 jquery 同时插入文本区域和代码片段: $("#copy-snippet-cont
regex - 解释一下这个 .htaccess 片段
有人可以解释以下 htacess 行，我理解部分内容，但想要更深入的知识。作为注释，我假设它按预期工作，这目前还没有上线，我只是在阅读一些工作簿，这是打印的。 // Don't understand
f# - 方便的 F# 片段
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
javascript - 如何在更改选择列表值时附加和删除 html 片段
我目前正在尝试使用 Jquery 根据下拉列表的值附加音频标签 html 列表。主要问题是，当选择值更改时，empty() 和append() 方法根本不会将html 注入(inject)到播放列表d

首页

博学

6Ren·AI

商城

google-chrome - 我可以使用 chrome.devtools API 访问 JavaScript 片段吗？