Skip to content

Instantly share code, notes, and snippets.

@dmaynor
Created July 24, 2024 01:31
Show Gist options
  • Save dmaynor/2f8987e2b82822addcd0c3d669b2f625 to your computer and use it in GitHub Desktop.
Save dmaynor/2f8987e2b82822addcd0c3d669b2f625 to your computer and use it in GitHub Desktop.
Toddler_chrome
Here is a simple Chrome extension that detects searches starting with "how do I stop a toddler from" and replaces the search query with "LMAO GOOD LUCK" in 96 point Helvetica.
First, you'll need to create three files: `manifest.json`, `background.js`, and `content.js`.
### `manifest.json`
```json
{
"manifest_version": 3,
"name": "Toddler Search Modifier",
"version": "1.0",
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
}
```
### `background.js`
```javascript
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostContains: '.' },
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
```
### `content.js`
```javascript
function replaceSearchQuery() {
const searchParams = new URLSearchParams(window.location.search);
const query = searchParams.get('q') || searchParams.get('query') || searchParams.get('search');
if (query && query.toLowerCase().startsWith("how do i stop a toddler from")) {
document.body.innerHTML = '<div style="font-size: 96pt; font-family: Helvetica; text-align: center; margin-top: 20%;">LMAO GOOD LUCK</div>';
}
}
replaceSearchQuery();
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === "replaceSearchQuery") {
replaceSearchQuery();
sendResponse({status: "done"});
}
});
```
### `popup.html` (optional, for enabling the plugin through an icon)
```html
<!DOCTYPE html>
<html>
<head>
<title>Toddler Search Modifier</title>
<style>
body {
width: 200px;
height: 100px;
}
button {
width: 100%;
height: 40px;
}
</style>
</head>
<body>
<button id="enable">Enable</button>
<script src="popup.js"></script>
</body>
</html>
```
### `popup.js` (optional, for enabling the plugin through an icon)
```javascript
document.getElementById('enable').addEventListener('click', () => {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
function: replaceSearchQuery
});
});
});
function replaceSearchQuery() {
const searchParams = new URLSearchParams(window.location.search);
const query = searchParams.get('q') || searchParams.get('query') || searchParams.get('search');
if (query && query.toLowerCase().startsWith("how do i stop a toddler from")) {
document.body.innerHTML = '<div style="font-size: 96pt; font-family: Helvetica; text-align: center; margin-top: 20%;">LMAO GOOD LUCK</div>';
}
}
```
### Instructions:
1. Save the `manifest.json`, `background.js`, `content.js`, `popup.html`, and `popup.js` files into a new directory (e.g., `ToddlerSearchModifier`).
2. Open Chrome and go to `chrome://extensions/`.
3. Enable "Developer mode" by toggling the switch in the top right corner.
4. Click "Load unpacked" and select the directory where you saved the files.
5. The extension should now be installed and active.
This plugin will now replace the search results page content with the message "LMAO GOOD LUCK" in 96 point Helvetica whenever a search query starts with "how do I stop a toddler from".
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment