Skip to content

Commit b1f1f48

Browse files
ESJavadexESJavadex
authored
initial commit
1 parent d88829c commit b1f1f48

9 files changed

Lines changed: 158 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
# OneClickMap

‎content.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// Function to add the "Mapa" button to the navigation menu
2+
function addMapButton() {
3+
// Avoid duplicate buttons
4+
if (document.querySelector("#map-button")) return;
5+
6+
// Locate the navigation menu by its role or other identifying features
7+
const menuContainer = document.querySelector('div[role="list"]') || document.querySelector('.qogDvd');
8+
9+
if (!menuContainer) {
10+
console.warn("Menu container not found. Retrying...");
11+
return; // Exit if the menu is not found
12+
}
13+
14+
console.log("Menu container found:", menuContainer);
15+
16+
// Create the button
17+
const button = document.createElement("a");
18+
button.id = "map-button";
19+
button.innerText = "Mapa";
20+
button.href = `https://www.google.com/maps?q=${encodeURIComponent(document.title)}`;
21+
button.target = "_blank"; // Open in a new tab
22+
button.setAttribute("role", "link");
23+
button.setAttribute("aria-label", "Mapa");
24+
25+
// Add styles inline to prevent dependency on external classes
26+
button.style.display = "inline-block";
27+
button.style.padding = "6px 12px";
28+
button.style.margin = "5px";
29+
button.style.textDecoration = "none";
30+
button.style.color = "#1a73e8"; // Matches Google's link color
31+
button.style.fontSize = "14px";
32+
button.style.lineHeight = "22px";
33+
button.style.borderRadius = "4px";
34+
button.style.cursor = "pointer";
35+
36+
// Add hover effect
37+
button.addEventListener("mouseover", () => {
38+
button.style.backgroundColor = "#f1f3f4";
39+
});
40+
button.addEventListener("mouseout", () => {
41+
button.style.backgroundColor = "transparent";
42+
});
43+
44+
// Wrap the button in a div (to mimic other menu items)
45+
const buttonWrapper = document.createElement("div");
46+
buttonWrapper.role = "listitem";
47+
buttonWrapper.style.display = "inline-block"; // Matches layout
48+
buttonWrapper.appendChild(button);
49+
50+
// Insert the button at the beginning of the navigation menu
51+
menuContainer.insertBefore(buttonWrapper, menuContainer.firstChild);
52+
53+
console.log("Mapa button added successfully.");
54+
}
55+
56+
// Initialize a MutationObserver to handle dynamic changes
57+
const observer = new MutationObserver(() => {
58+
addMapButton(); // Retry adding the button on DOM changes
59+
});
60+
61+
// Start observing the entire document for changes
62+
observer.observe(document.body, { childList: true, subtree: true });
63+
64+
// Attempt initial injection
65+
addMapButton();
66+

‎icon128.png‎

Lines changed: 2 additions & 0 deletions
Loading

‎icon16.png‎

Lines changed: 2 additions & 0 deletions
Loading

‎icon48.png‎

Lines changed: 2 additions & 0 deletions
Loading

‎manifest.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Address to Map",
4+
"version": "1.1",
5+
"description": "Search for an address on Google Maps",
6+
"permissions": ["activeTab", "scripting"],
7+
"host_permissions": ["https://www.google.com/*"],
8+
"content_scripts": [
9+
{
10+
"matches": ["https://www.google.com/search*"],
11+
"js": ["content.js"],
12+
"css": ["style.css"]
13+
}
14+
],
15+
"action": {
16+
"default_popup": "popup.html",
17+
"default_icon": {
18+
"16": "icon16.png",
19+
"48": "icon48.png",
20+
"128": "icon128.png"
21+
}
22+
}
23+
}

‎popup.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Address to Map</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Google Maps Search</h1>
11+
<input type="text" id="address" placeholder="Enter an address">
12+
<button id="search">Search</button>
13+
<div id="map-container">
14+
<iframe id="map" frameborder="0"></iframe>
15+
</div>
16+
<script src="popup.js"></script>
17+
</body>
18+
</html>

‎popup.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
document.getElementById("search").addEventListener("click", () => {
2+
const address = document.getElementById("address").value;
3+
if (address) {
4+
const mapIframe = document.getElementById("map");
5+
const googleMapsUrl = `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;
6+
mapIframe.src = googleMapsUrl;
7+
} else {
8+
alert("Please enter an address.");
9+
}
10+
});

‎style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 10px;
4+
}
5+
h1 {
6+
font-size: 16px;
7+
}
8+
#address {
9+
width: 100%;
10+
padding: 8px;
11+
margin-bottom: 10px;
12+
}
13+
button {
14+
width: 100%;
15+
padding: 8px;
16+
background-color: #4285f4;
17+
color: white;
18+
border: none;
19+
cursor: pointer;
20+
}
21+
button:hover {
22+
background-color: #357ae8;
23+
}
24+
#map-container {
25+
margin-top: 10px;
26+
}
27+
#iframe {
28+
width: 100%;
29+
height: 400px;
30+
}
31+
#custom-map-container {
32+
background: #f9f9f9;
33+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34+
border-radius: 8px;
35+
}

0 commit comments

Comments
 (0)