Can I interact with elements of the specific Chrome Extension (e.g. click on a button of the extension) in JS script of my frontend?
This extension shows a button when clicked on, you get to your profile (Activity tab).
To use this extension you have to be on this site (StackOverflow) but not when you are in Activity tab (otherwise you'll not see the effect).
Your steps (more here):
save all files
go to chrome://extensions
switch browser to Developer mode
click LOAD UNPACKED
manifest.json
{
"manifest_version": 2,
"name": "Click",
"description": "Simple extension",
"version": "1.0.0",
"permissions": ["tabs", "<all_urls>"],
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<button id="btn-click">Go to profile</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function injectTheScript() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
});
}
document.getElementById('btn-click').addEventListener('click', injectTheScript);
content_script.js
function clickProfileLink() {
var stackOverflowProfile = document.getElementsByClassName("my-profile")[0];
stackOverflowProfile.click();
}
clickProfileLink();
Helpful links
Examples from Google
Good tutorial for beginners
Related
I'll try to delete a localStorage Item in JS with my Chrome/Firefox extension, but it seems like it won't work, and now I would like to know how can I debug this problem, here my code from my popup.js:
var btn = document.createElement("BUTTON");
btn.innerText = "Delete matchs";
btn.onclick = function () {
localStorage.removeItem('save_to_storage');
};
my popup.html:
<!DOCTYPE html>
<html lang="de">
<head>
<script src='popup.js' defer></script>
</head>
<body>
<div id='button'></div>
</body>
</html>
my manifest.json:
{
"name": "TEST",
"version": "2021.07.31",
"manifest_version": 2,
"description": "Test",
"author": "lucki1000",
"browser_action": {
"default_icon": "favicon.ico",
"default_popup": "popup.html"
},
"content_script":[
{
"js": ["popup.js"]
}
],
"permissions": ["tabs", "<all_urls>", "storage", "activeTab"]
}
If I press the button Delete matchs the save_to_storage item still appears in my developer tools, but if i type directly into the console localStorage.removeItem('save_to_storage'); it works as expected.
I test it in firefox and chromium.
I also tried to get the value of this item by using alert(localStorage.getItem('save_to_storage')); instead of localStorage.removeItem('save_to_storage'); in my popup.js but this alert was empty.
Can it be that my popup.js can't access this item? and if yes how can I solve this?
Test Enviroment:
Chromium Version 92.0.4515.107 (Offical Build) Arch Linux (64-Bit)
Mozilla Firefox 90.0.2 (64-Bit) for Arch Linux
Regards
Lucki1000
I am writing a chrome extension and am trying to bind an event listener to an HTML button via an external JS file.
The event listener works, however Chrome throws the following error:
This is manifest.json, background.js, and popup.html file in that order:
{
"name": "DRIP",
"version": "1.0",
"manifest_version": 2,
"description": "DRIP is an automation tool for purchasing limted items",
"permissions": ["storage", "tabs"],
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
}
}
function myAlert(){
alert('hello world')
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', myAlert);
});
__
<html>
<head>
<title>Test</title>
</head>
<body>
<form name='testForm'>
<input type='button' id='alertButton' value='click me'>
</form>
<script language='javascript' src='background.js' defer></script>
</body>
I'm sorry if my formatting isn't great. Input is greatly appreciated!
Remove
"background": {
"scripts": ["background.js"]
}
That's for running tasks in the background and loads a background page. It is running on a blank page _generated_background_page.html (that it generated for you). Note that you can set the background page's html if you needed to.
Popup is a separate background page with the html set to the default_popup value. That is the page you get when you click the icon and get a popup.
Official docs for reference: https://developer.chrome.com/extensions/background_pages
I am trying to create a chrome extension that will save your google search inputs in a CSV file that is downloadable. For example: I enter the search input in google search "programming python tutorials". When search input is typed, I should be able to click the action button chrome extension to save the search input in an organized CSV file that is downloadable. This is similar to web scraping, but not really. I don't want the website information saved, I just want the search inputs saved. I have searched the chrome extension web store and online tutorials, but really haven't found anything on this. Can you please suggest where I can get started? Thank you.
What you want is a content script that is run only on Google search.
eg
{
"name": "Log Google",
"version": "1.0",
"description": "Log Google search data",
"permissions": ["tabs", "*://*.google.com/*"],
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["logdata.js"]
}
]
}
Where logdata.js is the code that you want to run whenever you visit the search page. I would suggest parsing the url of the page and getting the query rather than sorting through html elements.
To get the url of the current tab:
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
});
As for writing to the disk, take a look at the chrome.fileSystem api.
Hope this helps.
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
}, false);
}, false);
//logdata.js
{
"manifest_version": 2,
"name": "Log Google",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"description": "Log Google search data",
"permissions": ["tabs", "*://*.google.com/*"],
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["logdata.js"]
}
]
}
//manifest.json
<!doctype html>
<html>
<head>
<title>Open Log</title>
<script src="logdata.js"></script>
</head>
<body>
<h1>Logger</h1>
<button id="checkPage">Results</button>
</body>
</html>
popup.html
I'm trying to write a Chrome extension that highlights certain words that were entered in extension's textfield
For example: I enter "web" in extension's area, press the button. On active tab all "web" words are should be highlighted.
I've found a nice web-pagethat has all the functions I need.
In my code, when I try to use them in my Extension, nothing works.
manifest file
{
"manifest_version": 2,
"name": "Word search & highlight",
"version": "1.0",
"icons": {
"16": "16x16.png",
"32": "32x32.png",
"48": "48x48.png",
"128": "128x128.png"
},
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [ "popup.js"],
"run_at": "document_end"
}
],
"permissions": [
"tabs", "activeTab"
],
"browser_action": {
"default_title": "Start searching",
"default_icon": "48x48.png",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
<title></title>
</head>
<body>
<input type="text" id="searchtextfield"><br>
<input id="btn_save" value="Save" type="button">
<input id="btn_search" value="Search" type="button"><br>
</body>
</html>
And here's popup.js file: it's too long, so I made a pastebin document:
http://pastebin.com/g5ZenE48
I can't get innerHTML of webpage from these functions and I don't really understand how to make this all work.
sean-adams is correct, your browser action (popup.html) cannot communicate directly with your content script (popup.js). You can think of a content script as being an addition to whatever page the user is visiting, whereas the browser action is directly integrated as part of your chrome extension.
So, you will indeed need to use message passing to communicate. It's simple though. First, I recommend renaming your browser action popup to something like browser_popup.html. I'll use a stripped down example for brevity:
//browser_popup.html
<input type="button" id="my_button" value="Click Me">
<script src='browser_popup.js'></script>
You'll also want another file browser_popup.js for handling events.
//browser_popup.js
var button = document.querySelector('#my_button');
button.addEventListener('click', function() {
// Send message to active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, 'button_clicked');
});
});
In your content script (let's call it content.js) you need to listen for the message:
//content.js
chrome.runtime.onMessage.addListener(function(message) {
if (message == 'button_clicked') {
// code to modify page...
}
});
What am I doing wrong? I want to run a function when clicking "Show me some foo".
manifest.json browser_action
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="changes">
<span class="reset">Show me some foo
</span>
</div>
</body>
</html>
popup.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"reset.js"});
});
reset.js
var el = document.getElementById('foo');
el.onclick = showFoo;
function showFoo() {
alert('I am foo!');
return false;
}
Full manifest.json file
{
"name": "App name",
"version": "1.0.2",
"manifest_version": 2,
"description": "Desc.",
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": "img/icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["js/myscript.js"],
"exclude_matches":[
"http://site.com/*"
]
}
],
"web_accessible_resources": [
"chrome_ex_oauth.html"
]
}
I'm not sure what you are trying to do, but I'll explain your code to you:
user clicks a browserAction
popup window is crated and scripts from popup.html are loaded
popup.js loads and registers a listener chrome.browserAction.onClicked.addListener
user closes a popup window (by clicking anywhere outside it or on the browserAction again)
pupup.html page is unloaded
chrome.browserAction.onClicked.addListener listener is unregistered
As you can see reset.js is never loaded as it's never injected. What's more, you can't have a popup.html and chrome.browserAction.onClicked.addListener in the same extension ("This event will not fire if the browser action has a popup." source).
You probably want to put chrome.browserAction.onClicked.addListener into the background page so that reset.js is injected to current page whenever browserAction is clicked. And, as I mentioned above, for chrome.browserAction.onClicked.addListener to fire, you need to get rid of "default_popup": "popup.html" from manifest.
If you wanted to inject a script to popup.html - it doesn't make much sense. You have full control over popup.html and you can simply put reset.js in the <head>.