Skip to content

Commit fe48f02

Browse files
penguinifypenguinify
committed
chrome web store is for sissy's
1 parent 20268f4 commit fe48f02

File tree

2 files changed

+158
-147
lines changed

2 files changed

+158
-147
lines changed

‎extension/manifest.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default defineManifest({
1111
newtab: "index.html",
1212
},
1313
options_page: "options.html",
14-
permissions: ["geolocation", "storage"],
14+
permissions: ["geolocation", "storage", "search"],
1515
web_accessible_resources: [
1616
{
1717
resources: ["widgets.html", "assets/*"],

‎extension/src/ui/widgets/searchbar.widget.ts‎

Lines changed: 157 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { WidgetRegistry } from "../../data/widgetmanager";
22
import { PenArray } from "../../framework/penexutils";
33
import {
4-
type UserConfig,
5-
type WidgetConfig,
6-
type WidgetOptionsRecord,
4+
type UserConfig,
5+
type WidgetConfig,
6+
type WidgetOptionsRecord,
77
} from "../../types";
88
import { Widget } from "../abstractwidget";
99
import { ColorOption, TextAreaOption, TextOption } from "../widgetoptions";
10+
import { TextData } from "./text.widget";
1011

1112
export class SearchBarWidget extends Widget<WidgetConfig<TextData>> {
12-
render(): PenArray {
13-
// idk why, but typescript is being weird in this file, just ignore the errors, and all the other ones because it is not worth the time
14-
const config: UserConfig = this.getConfig();
13+
render(): PenArray {
14+
// idk why, but typescript is being weird in this file, just ignore the errors, and all the other ones because it is not worth the time
15+
const config: UserConfig = this.getConfig();
1516

16-
// Compose style strings for container and input
17-
const containerStyle = `
17+
// Compose style strings for container and input
18+
const containerStyle = `
1819
display: flex;
1920
justify-content: center;
2021
align-items: center;
@@ -23,10 +24,10 @@ border: ${this.data.data.outlineWidth || "2px"} solid ${this.data.data.outline |
2324
background-color: ${this.data.data.backgroundColor || config.background.hex || "#000000"};
2425
${this.data.data.customCSS || ""}
2526
`
26-
.replace(/\s+/g, " ")
27-
.trim();
27+
.replace(/\s+/g, " ")
28+
.trim();
2829

29-
const inputStyle = `
30+
const inputStyle = `
3031
outline: none;
3132
padding: ${this.data.data.paddingY || "5px"} ${this.data.data.paddingX || "10px"};
3233
font-size: ${this.data.data.fontSize || "16px"};
@@ -38,13 +39,13 @@ color: ${this.data.data.inputTextColor || config.colors.textColor};
3839
background: transparent;
3940
border: none;
4041
`
41-
.replace(/\s+/g, " ")
42-
.trim();
42+
.replace(/\s+/g, " ")
43+
.trim();
4344

44-
// Placeholder color via inline style (not standard, but will be handled below)
45-
const placeholderColor = this.data.data.placeholderTextColor || "#888888";
45+
// Placeholder color via inline style (not standard, but will be handled below)
46+
const placeholderColor = this.data.data.placeholderTextColor || "#888888";
4647

47-
this.pens = PenArray.fromHTML(`
48+
this.pens = PenArray.fromHTML(`
4849
<div id="searchbar-widget-${this.id}" style="${containerStyle}">
4950
<input
5051
type="text"
@@ -55,149 +56,159 @@ style="${inputStyle}"
5556
</div>
5657
`);
5758

58-
const inputElement = this.pens.getById(`searchbar-input-${this.id}`);
59+
const inputElement = this.pens.getById(`searchbar-input-${this.id}`);
5960

60-
// Set placeholder color using JS for cross-browser support
61-
if (inputElement.element instanceof HTMLInputElement) {
62-
try {
63-
inputElement.element.style.setProperty(
64-
"color",
65-
this.data.data.inputTextColor || "#FFFFFF",
66-
);
67-
// Use a dynamic stylesheet for placeholder color
68-
const styleSheet = document.createElement("style");
69-
styleSheet.innerHTML = `
61+
// Set placeholder color using JS for cross-browser support
62+
if (inputElement.element instanceof HTMLInputElement) {
63+
try {
64+
inputElement.element.style.setProperty(
65+
"color",
66+
this.data.data.inputTextColor || "#FFFFFF",
67+
);
68+
// Use a dynamic stylesheet for placeholder color
69+
const styleSheet = document.createElement("style");
70+
styleSheet.innerHTML = `
7071
#searchbar-input-${this.id}::placeholder {
7172
color: ${placeholderColor};
7273
opacity: 1;
7374
}
7475
`;
75-
document.head.appendChild(styleSheet);
76-
} catch (_e) {
77-
// ignore
78-
}
79-
}
76+
document.head.appendChild(styleSheet);
77+
} catch (_e) {
78+
// ignore
79+
}
80+
}
8081

81-
if (!this.displayInstance && !this.editorInstance) {
82-
this.setParent(this.pens.getById(`searchbar-widget-${this.id}`));
83-
this.setPosition(this.pens.getById(`searchbar-widget-${this.id}`));
84-
inputElement.element.addEventListener("keydown", (event: any) => {
85-
if (event.key === "Enter") {
86-
this.search(inputElement.element.value);
87-
}
88-
});
89-
} else {
90-
}
82+
if (!this.displayInstance && !this.editorInstance) {
83+
this.setParent(this.pens.getById(`searchbar-widget-${this.id}`));
84+
this.setPosition(this.pens.getById(`searchbar-widget-${this.id}`));
85+
inputElement.element.addEventListener("keydown", (event: any) => {
86+
if (event.key === "Enter") {
87+
this.search(inputElement.element.value);
88+
}
89+
});
90+
} else {
91+
}
9192

92-
// why does it return something? who knows and who will ever know
93-
return this.pens;
94-
}
93+
// why does it return something? who knows and who will ever know
94+
return this.pens;
95+
}
9596

96-
search(query: string): void {
97-
const searchURL =
98-
this.data.data.searchEngineURL || "https://www.google.com/search?q=%s";
99-
const finalURL = searchURL.replace("%s", encodeURIComponent(query));
100-
window.location.href = finalURL;
101-
}
97+
search(query: string): void {
98+
// GO FUCK YOURSELF CHROME WEB STORE
99+
// const searchURL =
100+
// this.data.data.searchEngineURL || "https://www.google.com/search?q=%s";
101+
// const finalURL = searchURL.replace("%s", encodeURIComponent(query));
102+
// window.location.href = finalURL;
103+
if (chrome && chrome.search && chrome.search.query) {
104+
chrome.search.query({
105+
text: query,
106+
disposition: 'CURRENT_TAB',
107+
}).catch((error: Error) => {
108+
console.error('Search API error:', error);
109+
// Fallback to Google search if API fails
110+
window.location.href = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
111+
});
112+
}
102113

103-
static defaultConfig(): WidgetConfig<{}> {
104-
return {
105-
WidgetRecordId: "searchbar-widget",
106-
description: "lame searchbar widget.",
107-
enabled: true, // icl this doesn't even do anything unless the widget manager checks for it
108-
position: {
109-
x: 0,
110-
y: 0,
111-
scaleX: 0.5,
112-
scaleY: 0.5,
113-
},
114-
data: {
115-
placeholderText: "Search...",
116-
cornerRadius: "8px",
117-
backgroundColor: "#000000",
118-
inputTextColor: "#FFFFFF",
119-
placeholderTextColor: "#888888",
120-
outline: "#FFFFFF",
121-
outlineWidth: "2px",
122-
fontSize: "16px",
123-
fontWeight: "normal",
124-
fontFamily: "",
125-
fontStyle: "normal",
126-
paddingX: "10px",
127-
paddingY: "5px",
128-
customCSS: "",
129-
searchEngineURL: "https://www.google.com/search?q=%s",
130-
},
131-
};
132-
}
133-
static getWidgetOptionsRecord(): WidgetOptionsRecord {
134-
return {
135-
placeholderText: new TextOption(
136-
"Placeholder Text",
137-
"The placeholder text displayed in the search bar.",
138-
),
139-
cornerRadius: new TextOption(
140-
"Corner Radius",
141-
"The border radius of the search bar (e.g., '8px').",
142-
),
143-
backgroundColor: new ColorOption(
144-
"Background Color",
145-
"The background color of the search bar.",
146-
),
147-
outline: new ColorOption(
148-
"Outline Color",
149-
"The outline color of the search bar when focused.",
150-
),
151-
inputTextColor: new ColorOption(
152-
"Text Color",
153-
"The color of the text in the search bar.",
154-
),
155-
placeholderTextColor: new ColorOption(
156-
"Placeholder Text Color",
157-
"The color of the placeholder text in the search bar.",
158-
),
159-
outlineWidth: new TextOption(
160-
"Outline Width",
161-
"The width of the outline when the search bar is focused (e.g., '2px').",
162-
),
163-
fontSize: new TextOption(
164-
"Font Size",
165-
"The font size of the text in the search bar (e.g., '16px').",
166-
),
167-
fontWeight: new TextOption(
168-
"Font Weight",
169-
"The font weight of the text in the search bar (e.g., 'normal', 'bold').",
170-
),
171-
fontFamily: new TextOption(
172-
"Font Family",
173-
"The font family of the text in the search bar (e.g., 'Arial, sans-serif').",
174-
),
175-
fontStyle: new TextOption(
176-
"Font Style",
177-
"The font style of the text in the search bar (e.g., 'normal', 'italic').",
178-
),
179-
paddingX: new TextOption(
180-
"Padding X",
181-
"The horizontal padding inside the search bar (e.g., '10px').",
182-
),
183-
paddingY: new TextOption(
184-
"Padding Y",
185-
"The vertical padding inside the search bar (e.g., '5px').",
186-
),
187-
customCSS: new TextAreaOption(
188-
"Custom CSS",
189-
"this is directely added to the style='' of the searchbar container element.",
190-
),
191-
searchEngineURL: new TextOption(
192-
"Search Engine URL",
193-
"The URL of the search engine to use, with '%s' as a placeholder for the query (e.g., 'https://www.google.com/search?q=%s').",
194-
),
195-
};
196-
}
114+
static defaultConfig(): WidgetConfig<{}> {
115+
return {
116+
WidgetRecordId: "searchbar-widget",
117+
description: "lame searchbar widget.",
118+
enabled: true, // icl this doesn't even do anything unless the widget manager checks for it
119+
position: {
120+
x: 0,
121+
y: 0,
122+
scaleX: 0.5,
123+
scaleY: 0.5,
124+
},
125+
data: {
126+
placeholderText: "Search...",
127+
cornerRadius: "8px",
128+
backgroundColor: "#000000",
129+
inputTextColor: "#FFFFFF",
130+
placeholderTextColor: "#888888",
131+
outline: "#FFFFFF",
132+
outlineWidth: "2px",
133+
fontSize: "16px",
134+
fontWeight: "normal",
135+
fontFamily: "",
136+
fontStyle: "normal",
137+
paddingX: "10px",
138+
paddingY: "5px",
139+
customCSS: "",
140+
searchEngineURL: "https://www.google.com/search?q=%s",
141+
},
142+
};
143+
}
144+
static getWidgetOptionsRecord(): WidgetOptionsRecord {
145+
return {
146+
placeholderText: new TextOption(
147+
"Placeholder Text",
148+
"The placeholder text displayed in the search bar.",
149+
),
150+
cornerRadius: new TextOption(
151+
"Corner Radius",
152+
"The border radius of the search bar (e.g., '8px').",
153+
),
154+
backgroundColor: new ColorOption(
155+
"Background Color",
156+
"The background color of the search bar.",
157+
),
158+
outline: new ColorOption(
159+
"Outline Color",
160+
"The outline color of the search bar when focused.",
161+
),
162+
inputTextColor: new ColorOption(
163+
"Text Color",
164+
"The color of the text in the search bar.",
165+
),
166+
placeholderTextColor: new ColorOption(
167+
"Placeholder Text Color",
168+
"The color of the placeholder text in the search bar.",
169+
),
170+
outlineWidth: new TextOption(
171+
"Outline Width",
172+
"The width of the outline when the search bar is focused (e.g., '2px').",
173+
),
174+
fontSize: new TextOption(
175+
"Font Size",
176+
"The font size of the text in the search bar (e.g., '16px').",
177+
),
178+
fontWeight: new TextOption(
179+
"Font Weight",
180+
"The font weight of the text in the search bar (e.g., 'normal', 'bold').",
181+
),
182+
fontFamily: new TextOption(
183+
"Font Family",
184+
"The font family of the text in the search bar (e.g., 'Arial, sans-serif').",
185+
),
186+
fontStyle: new TextOption(
187+
"Font Style",
188+
"The font style of the text in the search bar (e.g., 'normal', 'italic').",
189+
),
190+
paddingX: new TextOption(
191+
"Padding X",
192+
"The horizontal padding inside the search bar (e.g., '10px').",
193+
),
194+
paddingY: new TextOption(
195+
"Padding Y",
196+
"The vertical padding inside the search bar (e.g., '5px').",
197+
),
198+
customCSS: new TextAreaOption(
199+
"Custom CSS",
200+
"this is directely added to the style='' of the searchbar container element.",
201+
),
202+
searchEngineURL: new TextOption(
203+
"Search Engine URL (deprecated)",
204+
"chrome web store is a ass marketplace, if you want to change the search engine you will have to use chromium's shit selector",
205+
),
206+
};
207+
}
197208
}
198209

199210
function register() {
200-
WidgetRegistry.registerWidget("searchbar-widget", SearchBarWidget);
211+
WidgetRegistry.registerWidget("searchbar-widget", SearchBarWidget);
201212
}
202213

203214
export default register();

0 commit comments

Comments
 (0)