On click inside the extension
Fetch id"dfa5" text data and alert
I am looking for when someone clicks inside the extension button, then fetch h1 id"" data. and alert
manifest.json
{
"manifest_version": 2,
"name": "Sample Name",
"version": "0.1.0",
"description": "This is a sample description",
"short_name": "Short Sample Name",
"permissions": ["activeTab","tabs", "declarativeContent", "storage", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["background.css"],
"js": ["background.js"]
}
],
"browser_action": {
"default_title": "Does a thing when you do a thing",
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"32": "icons/icon32.png"
}
}
}
background.js
document.addEventListener("DOMContentLoaded", () => {
var button = document.getElementById("asdfjk")
button.addEventListener("click", () => {
sdef();
})
})
function sdef() {
var ksdfh = document.getElementById("dfa5").innerHTML; // current website page h1 id="dfa5"
alert(ksdfh)
}
Related
I created a js script that goes with my popup.html for a chrome browser extension I'm working on. It listens for a change in a slider value on the HTML and then sends a message to the content.js script with the new data. However, it seems I can't use sendMessage in this script. I'm using manifest v3.
Here's my js:
var slider = document.getElementById("slider");
let value = slider.value;
//function is called when the slider moves
changeSlider = function() {
value = slider.value;
update();
}
update = function() {
chrome.runtime.sendMessage({ message: "update", data: value });
}
Here's my manifest:
{
"manifest_version": 3,
"name": "e",
"version": "0.1",
"author": "e",
"homepage_url": "https://www.example.com",
"permissions": [
"contextMenus",
"activeTab",
"nativeMessaging"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content.js"]
}],
"web_accessible_resources": [
{
"resources": ["src/*"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"background": {
"service_worker": "src/background.js"
},
"action":
{
"default_popup": "src/popup.html",
"default_icon": "src/resources/icon.png"
},
"icons": {
"16": "src/resources/icon-16.png",
"32": "src/resources/icon-32.png",
"48": "src/resources/icon-48.png",
"128": "src/resources/icon-128.png"
}
}
And here's the console error I get whenever I adjust the slider:
additionally, my interpreter doesn't autofill chrome.runtime, so I assume something went wrong there. Help :D
I know there are 3 different contexts : background, popup, web page. I want to capture/intercept a web page's console log in my extension, How can I do that?
Here is my code:
contentScript.js:
console.log('starting>>>>');
var log = console.log;
console.log = function () {
log.call(this, '**** MY Console**** ');
log.apply(this, Array.prototype.slice.call(arguments));
// ...
}
};
manifest.json:
{
"name": "my extension 01",
"version": "1.0",
"description": "----",
"permissions": ["activeTab","storage","declarativeContent"],
"background":{
"scripts":["background.js"],
"persistent":false
},
"page_action": {
"default_popup": "popup.html"
},
"options_page": "options.html",
"content_scripts": [
{
"matches": ["https://MY-WEBSITE/*"],
"run_at":"document_start",
"js": ["contentScript.js"]
}
],
"manifest_version": 2
}
I'm using the example here as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:
<script type="text/javascript" src="popup.js"></script>
And the first lines of popup.js are:
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log("test");
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
Manifest.json has the following permissions:
{
"manifest_version": 2,
"name": "",
"version": "1.0",
"description": "",
"icons": { "16": "icon16.jpg",
"48": "icon48.jpg",
"128": "icon128.jpg" },
"minimum_chrome_version": "46",
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js", "getDescription.js"],
"run_at": "document_start"
}],
"options_page": "options.html",
"permissions": ["<all_urls>", "tabs","storage", "activeTab"]
}
Nothing is appearing in console, as if function isn't firing at all.
As it mention here onClicked fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
If you want to have the popup and then to execute a script when the icon is clicked use below approach.
{
"name": "My Extension",
"version": "0.1",
"manifest_version" : 2,
"description": "la lala laa",
"background" : {
"scripts" : ["background.js"]
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Inside the background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "popup.js"});
});
Or it should work fine if you have below in your popup.html
<script src="popup.js"></script>
Inside your popup.js
window.onload = function() {
console.log("do whatever you want here !!!")
}
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed
So I'm trying to make an extension that on click opens a tab and goes to a page. The only thing I can make it do so far is open a tab and give me this error:
No webpage was found for the web address:
chrome-extension://hgjkkhjinhilcehaaldcnopaefinlfif/https://www.google.com/
Here is the manifest.json:
{
"name": "New App",
"version": "0.1",
"permissions": ["tabs"],
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"icons": {
"48": "icon.png"
}
}
Here is background.js
chrome.browserAction.onClicked.addListener
(function(tab)
{chrome.tabs.create({'url': chrome.extension.getURL('https://www.google.com/')}, function(tab) {})
}
)
What I was trying to do was open a new tab and go to a website in the browser action. Here is the answer:
Manifest.json
{ "name": "Funny Pictures",
"version": "0.1",
"manifest_version": 2,
"description": "Rick Roll all your friends!",
"browser_action": {
"default_icon": "funnyface.png"
},
"icons": {
"48": "funnyface.png"
},
"background":{
"scripts": ["background.js"]
}
}
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
I swear I tried this previously, but that's how it goes I guess.