Skip to content

Commit a1c97b5

Browse files
oliverdunkjpmedley
oliverdunk
and
jpmedley
authored
Add DevTools Tips example (GoogleChrome#1013)
* Add DevTools Tips example * Update functional-samples/tutorial.focus-mode-debugging/README.md Co-authored-by: Joe Medley <[email protected]> --------- Co-authored-by: Joe Medley <[email protected]>
1 parent c123287 commit a1c97b5

File tree

11 files changed

+219
-0
lines changed

11 files changed

+219
-0
lines changed

‎functional-samples/tutorial.focus-mode-debugging/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Oliver Focus Mode
2+
3+
Extension used in the [Debugging Chrome extensions](https://www.youtube.com/watch?v=Ta-YTDhiBIQ) DevTools Tips video. This extension simplifies the styling of the extensions and Chrome Web Store documentation pages so that they are easier to read when the action icon is clicked.
4+
5+
This extension is based on the [Focus Mode](/functional-samples/tutorial.focus-mode/) extension.
6+
7+
**Note:** `background.js` and `focus-mode.js` are intentionally broken. Try to fix them, and compare your fixes with the code in the `fixed` folder.
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. Visit a page in the Extensions or Chrome Web Store sections on developer.chrome.com, e.g https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-focus-mode/.
14+
4. Click the extension icon to toggle focus mode.

‎functional-samples/tutorial.focus-mode-debugging/background.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Copyright 2023 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
chrome.runtime.onInstalled.addListener(() => {
16+
chrome.action.setBadgeText({
17+
text: 'OFF'
18+
});
19+
});
20+
21+
const extensions = 'https://developer.chrome.com/docs/extensions';
22+
const webstore = 'https://developer.chrome.com/docs/webstore';
23+
24+
// When the user clicks on the extension action
25+
chrome.action.onClicked.addListener(async (tab) => {
26+
if (tab.url?.startsWith(extensions) || tab.url?.startsWith(webstore)) {
27+
// We retrieve the action badge to check if the extension is 'ON' or 'OFF'
28+
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
29+
// Next state will always be the opposite
30+
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
31+
32+
// Set the action badge to the next state
33+
await chrome.action.setBadgeText({
34+
tabId: tab.id,
35+
text: nextState
36+
});
37+
38+
if (nextState === 'ON') {
39+
chrome.tabs.sendMessage(tab.id, { data: 'focus-on' });
40+
} else if (nextState === 'OFF') {
41+
chrome.tabs.sendMessage(tab.id, { data: 'focus-off' });
42+
}
43+
}
44+
});

‎functional-samples/tutorial.focus-mode-debugging/fixed/background.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Copyright 2023 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
chrome.runtime.onInstalled.addListener(() => {
16+
chrome.action.setBadgeText({
17+
text: 'OFF'
18+
});
19+
});
20+
21+
const extensions = 'https://developer.chrome.com/docs/extensions';
22+
const webstore = 'https://developer.chrome.com/docs/webstore';
23+
24+
// When the user clicks on the extension action
25+
chrome.action.onClicked.addListener(async (tab) => {
26+
if (tab.url?.startsWith(extensions) || tab.url?.startsWith(webstore)) {
27+
// We retrieve the action badge to check if the extension is 'ON' or 'OFF'
28+
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
29+
// Next state will always be the opposite
30+
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
31+
32+
// Set the action badge to the next state
33+
await chrome.action.setBadgeText({
34+
tabId: tab.id,
35+
text: nextState
36+
});
37+
38+
if (nextState === 'ON') {
39+
chrome.tabs.sendMessage(tab.id, { data: 'focus-on' });
40+
} else if (nextState === 'OFF') {
41+
chrome.tabs.sendMessage(tab.id, { data: 'focus-off' });
42+
}
43+
}
44+
});

‎functional-samples/tutorial.focus-mode-debugging/fixed/focus-mode.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Copyright 2023 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
chrome.runtime.onMessage.addListener((msg) => {
16+
switch (msg.data) {
17+
case 'focus-on':
18+
document.body.setAttribute('data-focus-mode', 'on');
19+
break;
20+
case 'focus-off':
21+
document.body.removeAttribute('data-focus-mode');
22+
break;
23+
}
24+
});

‎functional-samples/tutorial.focus-mode-debugging/focus-mode.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
Copyright 2023 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
body[data-focus-mode='on']
18+
> .scaffold
19+
> :is(top-nav, navigation-rail, side-nav, footer),
20+
body[data-focus-mode='on'] main > :not(:last-child),
21+
body[data-focus-mode='on'] main > :last-child > navigation-tree,
22+
body[data-focus-mode='on'] main .toc-container {
23+
display: none;
24+
}
25+
26+
body[data-focus-mode='on'] main > :last-child {
27+
margin-top: min(10vmax, 10rem);
28+
margin-bottom: min(10vmax, 10rem);
29+
}

‎functional-samples/tutorial.focus-mode-debugging/focus-mode.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Copyright 2023 Google LLC
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// https://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
chrome.runtime.onMessage.addListener((msg) => {
16+
switch (msg) {
17+
case 'focus-on':
18+
document.body.setAttribute('data-focus-mode', 'on');
19+
break;
20+
case 'focus-off':
21+
document.body.removeAttribute('data-focus-mode');
22+
break;
23+
}
24+
});

‎functional-samples/tutorial.focus-mode-debugging/images/icon-128.png

14.4 KB
Loading

‎functional-samples/tutorial.focus-mode-debugging/images/icon-16.png

876 Bytes
Loading

‎functional-samples/tutorial.focus-mode-debugging/images/icon-32.png

1.42 KB
Loading

‎functional-samples/tutorial.focus-mode-debugging/images/icon-48.png

3.8 KB
Loading

‎functional-samples/tutorial.focus-mode-debugging/manifest.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Oliver Focus Mode",
4+
"description": "Example extension from DevTools Tips video.",
5+
"version": "1.0",
6+
"icons": {
7+
"16": "images/icon-16.png",
8+
"32": "images/icon-32.png",
9+
"48": "images/icon-48.png",
10+
"128": "images/icon-128.png"
11+
},
12+
"background": {
13+
"service_worker": "background.js"
14+
},
15+
"action": {
16+
"default_icon": {
17+
"16": "images/icon-16.png",
18+
"32": "images/icon-32.png",
19+
"48": "images/icon-48.png",
20+
"128": "images/icon-128.png"
21+
}
22+
},
23+
"permissions": [],
24+
"host_permissions": ["https://developer.chrome.com/*"],
25+
"commands": {
26+
"_execute_action": {
27+
"suggested_key": {
28+
"default": "Ctrl+B",
29+
"mac": "Command+B"
30+
}
31+
}
32+
},
33+
"content_scripts": [
34+
{
35+
"js": ["focus-mode.js"],
36+
"css": ["focus-mode.css"],
37+
"matches": ["https://developer.chrome.com/*"]
38+
}
39+
]
40+
}

0 commit comments

Comments
 (0)