14 | کجا چنده 15 | یک اکستنشن کروم است که به شما کمک میکند هنگام خرید، قیمت محصول مورد 17 | نظر خود را با بقیه فروشگاه ها مقایسه و بهترین خرید را داشته باشید. 19 |
20 |21 | برای شروع بالا سمت چپ در صفحه محصول بر روی دکمه 22 | 23 | کلیک کنید. 24 |
25 |
`;
72 |
73 | return "";
74 | }
75 |
76 | function handleImageError(event) {
77 | event.target.src = "./logo.png";
78 | }
79 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: shabnam;
3 | font-style: normal;
4 | font-weight: 500;
5 | src: url(./fonts/);
6 | src: url(./fonts/?#iefix) format("embedded-opentype"),
7 | url(./fonts//Shabnam-FD.woff2) format("woff2"),
8 | url(./fonts//Shabnam-FD.woff) format("woff"),
9 | url(./fonts//Shabnam-FD.ttf) format("truetype");
10 | }
11 |
12 | * {
13 | padding: 0;
14 | margin: 0;
15 | }
16 |
17 | body {
18 | font-family: shabnam;
19 | background-color: rgb(249, 249, 249);
20 | padding: 16px;
21 | padding-bottom: 48px;
22 | }
23 |
24 | a {
25 | text-decoration: none;
26 | }
27 |
28 | main {
29 | min-width: 700px;
30 | }
31 |
32 | li {
33 | list-style: none;
34 | }
35 |
36 | h1 {
37 | margin-bottom: 16px;
38 | }
39 |
40 | .guide {
41 | display: inline-flex;
42 | column-gap: 4px;
43 | align-items: center;
44 | font-size: 14px;
45 | }
46 |
47 | .kojachande--button {
48 | width: 100px;
49 | color: white;
50 | background-color: rgb(239, 64, 86);
51 | font-weight: bold;
52 | padding: 10px;
53 | border-radius: 0.5rem;
54 | margin: auto;
55 | border: none;
56 | }
57 |
58 | .product--list {
59 | display: flex;
60 | flex-direction: column;
61 | row-gap: 16px;
62 | }
63 |
64 | .product--image {
65 | width: 100px;
66 | height: 100px;
67 | object-fit: cover;
68 | border-radius: 12px;
69 | }
70 |
71 | .product--item {
72 | display: flex;
73 | column-gap: 16px;
74 | background-color: white;
75 | padding: 12px;
76 | border-radius: 12px;
77 | }
78 |
79 | .product--item-text {
80 | display: flex;
81 | flex-direction: column;
82 | justify-content: space-between;
83 | }
84 |
85 | .product--link {
86 | min-height: 48px;
87 | font-size: 16px;
88 | text-overflow: ellipsis;
89 | overflow: hidden;
90 | display: -webkit-box;
91 | -webkit-line-clamp: 2;
92 | -webkit-box-orient: vertical;
93 | line-height: 24px;
94 | }
95 |
96 | .product--price {
97 | font-size: 14px;
98 | }
99 |
100 | [data-compare="1"] {
101 | color: green;
102 | }
103 |
104 | [data-compare="-1"] {
105 | color: red;
106 | }
107 |
108 | .badge {
109 | color: white;
110 | max-width: max-content;
111 | padding: 6px 10px;
112 | border-radius: 10px;
113 | display: inline-flex;
114 | font-size: 12px;
115 | }
116 |
117 | .badge--danger {
118 | background-color: #ff4242;
119 | }
120 |
121 | .error{
122 | font-weight: bold;
123 | font-size: 18px;
124 | padding: 8px;
125 | }
126 |
127 |
128 | footer {
129 | position: fixed;
130 | bottom: 0;
131 | left: 0;
132 | right: 0;
133 | margin: auto;
134 | background: white;
135 | width: 100%;
136 | max-width: 685px;
137 | height: 36px;
138 | border-radius: 0.5rem 0.5rem 0 0;
139 | display: flex;
140 | align-items: center;
141 | padding-left: 1rem;
142 | box-shadow: 0 0 17px 0 rgb(0 0 0 / 12%);
143 | }
144 |
145 | footer span {
146 | margin-left: 0.75rem;
147 | }
148 |
149 | footer a {
150 | font-weight: bold;
151 | color: black;
152 | text-decoration: underline;
153 | }
--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
1 | const kc = createWrapper();
2 |
3 | const button = createButton();
4 | const hide = createHide();
5 |
6 | kc.appendChild(hide);
7 | kc.appendChild(button);
8 |
9 | document.body.appendChild(kc);
10 |
11 | function createWrapper() {
12 | const kc = document.createElement("div");
13 | addStyles(kc, {
14 | display: "flex",
15 | alignItems: "center",
16 | columnGap: "8px",
17 | justifyContent: "center",
18 | color: "white",
19 | backgroundColor: "#ef4056",
20 | fontWeight: "bold",
21 | borderRadius: "0.5rem",
22 | margin: "auto",
23 | top: "8px",
24 | left: "-85px",
25 | position: "fixed",
26 | zIndex: "999999999",
27 | border: "none",
28 | overflow: "hidden",
29 | transition: "left 500ms",
30 | });
31 |
32 | window.addEventListener("load", () => {
33 | kc.style.left = "23px";
34 | });
35 |
36 | return kc;
37 | }
38 |
39 | function createButton() {
40 | const button = document.createElement("button");
41 | button.textContent = "کجاچنده";
42 | addStyles(button, {
43 | color: "white",
44 | padding: "8px 0px 8px 8px",
45 | });
46 |
47 | button.addEventListener("click", () => {
48 | const productNameElement = document.querySelector("h1");
49 | const productPriceElement =
50 | document.querySelector(".text-h4-compact[data-testid='price-final']") ||
51 | document.querySelector(
52 | ".text-neutral-800[data-testid='price-no-discount']"
53 | );
54 |
55 | if (!productNameElement) {
56 | alert("لطفا تا نمایش نام محصول روی صفحه صبر کنید.");
57 | return;
58 | }
59 |
60 | chrome.runtime.sendMessage({
61 | action: "open_popup",
62 | product: {
63 | name: productNameElement.textContent,
64 | price: fixNumber(productPriceElement?.textContent.replaceAll(",", "")),
65 | origin: window.location.hostname,
66 | },
67 | });
68 | });
69 |
70 | return button;
71 | }
72 |
73 | function createHide() {
74 | const hide = document.createElementNS("http://www.w3.org/2000/svg", "svg");
75 | hide.setAttribute("xmlns", "http://www.w3.org/2000/svg");
76 | hide.setAttribute("fill", "none");
77 | hide.setAttribute("viewBox", "0 0 24 24");
78 | hide.setAttribute("stroke", "currentColor");
79 | hide.setAttribute("width", "24");
80 | hide.setAttribute("height", "24");
81 | addStyles(hide, {
82 | backgroundColor: "#de354a",
83 | height: "35px",
84 | cursor: "pointer",
85 | transition: "transform 300ms",
86 | });
87 |
88 | const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
89 | path.setAttribute("stroke-linecap", "round");
90 | path.setAttribute("stroke-linejoin", "round");
91 | path.setAttribute("d", "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18");
92 |
93 | // add hide event
94 | hide.addEventListener("click", () => {
95 | hide.classList.toggle("hide");
96 |
97 | if (hide.classList.contains("hide")) {
98 | kc.style.left = "-63px";
99 | hide.style.transform = "rotateY(180deg)";
100 | } else {
101 | kc.style.left = "23px";
102 | hide.style.transform = "rotateY(0deg)";
103 | }
104 | });
105 |
106 | hide.appendChild(path);
107 |
108 | return hide;
109 | }
110 |
111 | // Utils
112 | function fixNumber(str) {
113 | let persianNumbers = [
114 | /۰/g,
115 | /۱/g,
116 | /۲/g,
117 | /۳/g,
118 | /۴/g,
119 | /۵/g,
120 | /۶/g,
121 | /۷/g,
122 | /۸/g,
123 | /۹/g,
124 | ];
125 | let arabicNumbers = [
126 | /٠/g,
127 | /١/g,
128 | /٢/g,
129 | /٣/g,
130 | /٤/g,
131 | /٥/g,
132 | /٦/g,
133 | /٧/g,
134 | /٨/g,
135 | /٩/g,
136 | ];
137 |
138 | if (typeof str === "string") {
139 | for (var i = 0; i < 10; i++) {
140 | str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
141 | }
142 | }
143 | return str;
144 | }
145 |
146 | /**
147 | * Adds CSS styles to a given HTML or SVG element.
148 | *
149 | * @param {HTMLElement | SVGElement} element - The element to which styles will be applied.
150 | * @param {Record