centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

Added readme and licensing (#953)

Browse Source
This commit is contained in:
IanStanion-google
2023-06-20 11:58:08 -04:00
committed by GitHub
parent 622466f97c
commit 41e3f968a5
6 changed files with 137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
api-samples/devtools/inspectedWindow/devtools.html Normal file
View File

@@ -0,0 +1,19 @@
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<button>Display Types</button>
<script src="devtools.js"></script>

17
api-samples/devtools/inspectedWindow/devtools.js Normal file
View File

@@ -0,0 +1,17 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
chrome.devtools.panels.create('demo panel', 'icon.png', 'panel.html', () => {
console.log('user switched to this panel');
});

14
api-samples/devtools/inspectedWindow/inspectedWindow.md Normal file
View File

@@ -0,0 +1,14 @@
# devtools.inspectedWindow
This sample demonstrates using the `inspectedWindow` API to collect and use data on the resouces used in a webpage.
## Overview
`devtools.inspectedWindow.getResources()` is used to collect information about the webpage. A devtools panel is then created to display the amount of resources of each type used on the page.
## Running this extension
1. Clone this repository.
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
3. Navigate to a webpage and open the devtools window.
4. Navigate to the new devtools panel named "demo panel", and click on the button.

7
api-samples/devtools/inspectedWindow/manifest.json Normal file
View File

@@ -0,0 +1,7 @@
{
"name": "Devtools - inspectedWindow API sample",
"description": "Makes use of the devtools.inspectedWindow API to collect data and display it inside of a devtools panel.",
"version": "1.0",
"manifest_version": 3,
"devtools_page": "devtools.html"
}

47
api-samples/devtools/inspectedWindow/panel.html Normal file
View File

@@ -0,0 +1,47 @@
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html style="display: flex">
<head>
<meta charset="utf8" />
<style>
html {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body {
margin: 0;
padding: 0;
flex: 1;
display: flex;
width: 100%;
}
#container {
display: flex;
flex: 1;
width: 100%;
}
</style>
</head>
<body>
<script src="panel.js"></script>
</body>
</html>

33
api-samples/devtools/inspectedWindow/panel.js Normal file
View File

@@ -0,0 +1,33 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
const types = {};
chrome.devtools.inspectedWindow.getResources((resources) => {
resources.forEach((resource) => {
if (!(resource.type in types)) {
types[resource.type] = 0;
}
types[resource.type] += 1;
});
let result = `Resources on this page:
${Object.entries(types)
.map((entry) => {
const [type, count] = entry;
return `${type}: ${count}`;
})
.join('\n')}`;
let div = document.createElement('div');
div.innerText = result;
document.body.appendChild(div);
});