Skip to content

Commit bbcd025

Browse files
daidrjpmedleyoliverdunk
authored
Migration tabs sample (GoogleChrome#964)
* Add pin sample * Add README.md * Add screenshot sample * Add README.md * Add zoom sample * Add README.md * Add inspector sample * Add README.md * Fix typo * Remove wrapper * Remove inline style * Update api-samples/tabs/pin/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/screenshot/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/inspector/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update README * Update for loop * Remove children select * Change selected to active * Fix event listener * Set checkboxs to disabled * Fix layout * Fix wrong input data in create tab function * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update description * Update description * Update description * Fix typo * Update description * Rename * Fix file name * Update active check box * Update code style * Update api-samples/tabs/zoom/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/pin/README.md Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/pin/README.md Co-authored-by: Joe Medley <[email protected]> * Apply suggestions from code review Co-authored-by: Joe Medley <[email protected]> * Update api-samples/tabs/inspector/manifest.json Co-authored-by: Joe Medley <[email protected]> * Fix case issues * Update api-samples/tabs/inspector/manifest.json --------- Co-authored-by: Joe Medley <[email protected]> Co-authored-by: Oliver Dunk <[email protected]>
1 parent 38f60eb commit bbcd025

24 files changed

+1081
-0
lines changed

‎api-samples/tabs/inspector/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# chrome.tabs - Tab Inspector
2+
3+
A sample that demonstrates how to use the [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/) API.
4+
5+
## Overview
6+
7+
In the sample, a simple tab inspector manipulates the tabs and windows.
8+
9+
## Running this extension
10+
11+
1. Clone this repository.
12+
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
13+
3. Click the extension's icon to open the tab inspector.

‎api-samples/tabs/inspector/manifest.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "Tab Inspector",
3+
"description": "Demonstrates the chrome.tabs API and the chrome.windows API by providing a user interface to manage tabs and windows.",
4+
"version": "0.3",
5+
"permissions": ["tabs"],
6+
"background": {
7+
"service_worker": "service-worker.js"
8+
},
9+
"action": {
10+
"default_title": "Show tab inspector"
11+
},
12+
"manifest_version": 3
13+
}

‎api-samples/tabs/inspector/service-worker.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
chrome.action.onClicked.addListener(function () {
2+
chrome.tabs.create({
3+
url: chrome.runtime.getURL('window_and_tabs_manager.html')
4+
});
5+
});

‎api-samples/tabs/inspector/window_and_tabs_manager.css

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
.window-item {
2+
background-color: #aaeeee;
3+
margin: 4px;
4+
padding: 8px;
5+
margin: 20px;
6+
}
7+
8+
.window-id-wrapper {
9+
font-style: italic;
10+
width: 80px;
11+
display: inline-block;
12+
}
13+
14+
.window_left,
15+
.window_right,
16+
.window_width,
17+
.window_height {
18+
display: inline-block;
19+
}
20+
21+
.window-status-input {
22+
width: 60px;
23+
}
24+
25+
.tab-item {
26+
background-color: #eeeeee;
27+
margin: 8px;
28+
padding: 4px;
29+
}
30+
31+
.wrapper {
32+
margin: 8px;
33+
}
34+
35+
.tab_id {
36+
font-style: italic;
37+
width: 80px;
38+
display: inline-block;
39+
}
40+
41+
.tab-actions-wrapper {
42+
display: inline-block;
43+
}
44+
45+
.tab_index {
46+
width: 20px;
47+
}
48+
49+
.tab_window_id {
50+
width: 80px;
51+
}
52+
53+
#log {
54+
background-color: #eeaaee;
55+
margin: 20px;
56+
padding: 8px;
57+
}
58+
59+
.input-group {
60+
display: flex;
61+
justify-content: space-between;
62+
}
63+
64+
.label {
65+
display: inline-block;
66+
}
67+
68+
.tab_title,
69+
.tab_url,
70+
#new_window_url,
71+
#window_id_new,
72+
#url_new {
73+
width: 90%;
74+
}
75+
76+
.new-window-wrapper {
77+
background-color: #eeeebb;
78+
margin: 20px;
79+
padding: 8px;
80+
}
81+
82+
.new-tab-wrapper {
83+
background-color: #eeeeaa;
84+
margin: 20px;
85+
padding: 8px;
86+
}
87+
88+
h3 {
89+
text-align: center;
90+
margin: 8px;
91+
}
92+
93+
.window_left,
94+
.window_top,
95+
.window_width,
96+
.window_height,
97+
#new_window_left,
98+
#new_window_top,
99+
#new_window_width,
100+
#new_window_height {
101+
width: 50px;
102+
}
103+
104+
.new-window-status-wrapper {
105+
display: inline-block;
106+
}
107+
108+
.actions-wrapper {
109+
margin: 20px;
110+
}

‎api-samples/tabs/inspector/window_and_tabs_manager.html

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Tabs Inspector</title>
5+
<link rel="stylesheet" href="./window_and_tabs_manager.css" />
6+
</head>
7+
8+
<body>
9+
<div id="windowList">
10+
<!-- WindowItems Here -->
11+
</div>
12+
<template id="windowItem">
13+
<div class="window-item">
14+
<div class="window-id-wrapper">
15+
Window: <span class="window_id"></span>
16+
</div>
17+
<div class="window-status-wrapper">
18+
left:
19+
<input class="window_left" type="text" /> top:
20+
<input class="window_top" type="text" /> width:
21+
<input class="window_width" type="text" /> height:
22+
<input class="window_height" type="text" />
23+
<input class="window_focused" type="checkbox" disabled /> Focused
24+
<input class="window_current" type="checkbox" disabled /> Current
25+
<button class="window_refresh">Refresh</button>
26+
</div>
27+
<div id="tabList">
28+
<!-- TabItems Here -->
29+
</div>
30+
<button class="update_window_button">Update Window</button>
31+
<button class="remove_window_button">Close Window</button>
32+
<button class="refresh_active_tab_button">Refresh Active Tab</button>
33+
</div>
34+
</template>
35+
<template id="tabItem">
36+
<div class="tab-item">
37+
<div class="wrapper">
38+
<div class="tab_id"></div>
39+
<div class="tab-actions-wrapper">
40+
index:
41+
<input type="text" class="tab_index" />
42+
windowId:
43+
<input type="text" class="tab_window_id" />
44+
<button class="move_tab_button">Move</button>
45+
<button class="refresh_tab_button">Refresh</button>
46+
</div>
47+
</div>
48+
<div class="wrapper">
49+
<div class="input-group">
50+
<div class="label">title:</div>
51+
<input type="text" class="tab_title" />
52+
</div>
53+
<div class="input-group">
54+
<div class="label">url:</div>
55+
<input type="text" class="tab_url" />
56+
</div>
57+
<div><input type="checkbox" class="tab_active" /> Active</div>
58+
</div>
59+
<button class="update_tab_button">Update Tab</button>
60+
<button class="remove_tab_button">Close Tab</button>
61+
</div>
62+
</template>
63+
<div class="new-window-wrapper">
64+
<h3>Create Window</h3>
65+
<div class="wrapper">
66+
<div class="new-window-status-wrapper">
67+
left:
68+
<input type="text" id="new_window_left" /> top:
69+
<input type="text" id="new_window_top" /> width:
70+
<input type="text" id="new_window_width" /> height:
71+
<input type="text" id="new_window_height" />
72+
</div>
73+
</div>
74+
<div class="wrapper">
75+
<div class="input-group">
76+
<div class="label">url:</div>
77+
<input type="text" id="new_window_url" />
78+
</div>
79+
</div>
80+
<button id="create_window_button">Create</button>
81+
</div>
82+
<div class="new-tab-wrapper">
83+
<h3>Create Tab</h3>
84+
<div class="wrapper">
85+
<div class="input-group">
86+
<div class="label">windowId:</div>
87+
<input type="text" id="window_id_new" />
88+
</div>
89+
<div class="input-group">
90+
<div class="label">url:</div>
91+
<input type="text" id="url_new" />
92+
</div>
93+
<div><input type="checkbox" id="active_new" /> active</div>
94+
</div>
95+
<button id="create_tab_button">Create</button>
96+
</div>
97+
<div class="actions-wrapper">
98+
<button id="load_window_list_button">Refresh</button>
99+
<button id="update_all_button">Update All</button>
100+
<button id="move_all_button">Move All</button>
101+
<button id="clear_log_button">Clear Log</button>
102+
<button id="new_window_button">New Window</button>
103+
</div>
104+
<div id="log"></div>
105+
<script src="window_and_tabs_manager.js"></script>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)