iam trying to build an chrome extension that do actions on site,
the site have his API , for example if you click on edit link in site, in backgroung its send an API command like this App.Cases.edit(Casenumber)
when iam calling this line via chrome extension send script API i get an error, the error said that its anonymous function.
So what i did is i found the path that lead to the element that trigger the click.
as you can see in code,
and now i get an Uncaught Error: NotFoundError: DOM Exception 8
Any one have an idea how to handle this issue? or maybe even more simple how to get acess to the site API.
here is the code , this is the JS file
$(document).ready(function()
{
$('#btn1').click(function(){
chrome.tabs.executeScript(null,{file:"jquery-1.10.1.min.js"},function() {
chrome.tabs.executeScript(null,{code:" $('#row-37416').children().eq(3).children().eq(1).click(); "});
});
});
this is the html file:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src='jquery-1.10.1.min.js'></script>
<script src='alert.js'></script>
<script src='contentscript.js'></script>
</head>
<body>
<h1 id = "title">Extensions</h1>
<input type = "button" value ="Find And Replace" id="btn1" />
<div id="content">
</div>
</body>
</html>
this is the manifest file:
{
"name": "TEST",
"version": "1.0",
"manifest_version": 2,
"description": "jonathan",
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*"],
"js": ["jquery-1.10.1.min.js", "alert.js","contentscript.js"]
}
],
"permissions": [
"tabs", "http://*/*" , "https://*/*"
],
"browser_action":{
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Use "trigger()" to trigger the click instead of ".click()". See here:
http://api.jquery.com/trigger/
Related
Like the the 10,000 examples with the exact same heading, I am having a trouble with the development of a chrome extension, specifically the execution of scripts between my popup window and my content script.
The specific error i'm receiving is "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')".
Now, I have reviewed several dozen threads with the same issue and the common theme seems to be that the placement of the scripting within the HTML code is causing the script to execute prior to the DOM loading, however I have attempted the following to resolve placement being an issue.
I have reviewed my code and I have ensured that the script it executing directly above the tag (as to be the last item executing within the body section, and that the code also has the 'delay' flag within the script has a redundancy. I have also wrapped the code within the content script in window.onload=function() as a further redundancy, but alas, no love. I have also attempted moving the order of the code around within foreground.js, however as expected that didn't resolve the issue.
foreground.js
function calculatescript() {
console.log("This prints to the console of the page")
};
window.onload=function(){
var runcalculate = document.getElementById("runcalculate");
runcalculate.addEventListener("click", calculatescript);
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="popup.css">
<title>Example Extension</title>
</head>
<body>
<div>
<button class="button button1" id="runcalculate">Calculate</button>
</div>
<script src="foreground.js" defer></script>
</body>
</html>
manifest.js
{
"manifest_version": 3,
"name": "Example",
"description": "An example of a chrome extension using manifest v3",
"version": "0.0.1",
"icons": {
"16": "logo/logo-16.png",
"48": "logo/logo-48.png",
"128": "logo/logo-128.png"
},
"options_page": "settings/settings.html",
"action": {
"default_title": "example",
"default_popup": "popup/popup.html"
},
"permissions": [
"tabs", "scripting"
],
"host_permissions": [
"*://*/*"
],
"background": {
"service_worker": "service-worker.js"
},
"content_scripts": [{
"js": ["foreground.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
A background js scripts exist however are empty.
If I remove the attempt to pass the script and print directly to the console without trying to wrap it in a button, it works without issue.
I've exhausted my knowledge of what to do to get this working, and the ability to execute off a button is I imagine a fairly common practice, so I'm obviously doing something inherently wrong.
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 just started learning JS a few weeks ago and am trying to build a Chrome Extension. I've build a manifest.json, popup.html, popup.js, and content.js file.
When I try running the background page console on Chrome to see if the popup.js is working I keep getting the error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at popup.js:8
I've tried moving the script in the html to the bottom of the body, but it still ends in an error and have tried implementing:
document.addEventListener('DOMContentLoaded', function () {
// My code here.. ( Your code here )
});
in my popup.js and the windows.onload method, but still haven't been able to get rid of the error.
If someone could please point out any errors in my code and tell me what is wrong I would really appreciate it. Thanks
POPUP HTML
<!DOCTYPE html>
<html>
<head>
<title>Like IG Links</title>
</head>
<body>
<h3><center>Paste Links Below</center></h3>
<hr>
<textarea rows="10" cols="60" id="urls"></textarea>
<br>
<textarea rows="1" cols="5" id="counter" disabled></textarea>
<br>
<br>
<button type="submit" align="center" style="width:60px;"
id="start">Start</button>
<br>
<br>
<button type="submit" align="right" style="width:60px;"
id="stop">Stop</button>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
CONTENT JS
console.log('CHROME');
POPUP JS
console.log('background running');
function loadUrls() {
console.log("123");
}
var startbutton = document.getElementById("start");
startbutton.addEventListener('click', loadUrls);
MANIFEST JSON
{
"manifest_version": 2,
"name": "Like IG Links",
"version": "1.0",
"description": "Like IG Links",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"background": {
"scripts": ["popup.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "storage", "activeTab"]
}
Remove the background script portion of the manifest. After updating the extension, the errors should disappear. In an extension I am working on, I had jquery.js and popup.js in the HTML and in the manifest. The background script tag for the manifest is for logic that tracks browser events and responds to them persistently, not for the js behind the extension HTML.
I want my Chrome Extension to load Javascript once user visits a website. But currently, the Javascript is executed only when user click the extension icon and till the extension popup is open.
I saw the answer in this Chrome extension to load the script without clicking on icon question.
My manifest.json is:
{
"manifest_version": 2,
"name": "Javascript example",
"description": "Some description.",
"version": "1.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["popup.js"]
}
]
}
The popup.js is:
document.addEventListener('DOMContentLoaded', () => {
alert("Working");
});
popup.html is:
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
The alert dialog is shown only when I click the extension icon (i.e. when popup.html is run), not when a page loads. I want the popup.js file to execute without user needing to click the extension icon. What am I missing?
Your manifest works, but run_at defaults to document_idle which means that DOMContentLoaded has already fired. This can be fixed by specifying run_at to document_start instead.
{
"manifest_version": 2,
"name": "Javascript example",
"description": "Some description.",
"version": "1.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [
{
"matches": ["*://*/*"],
"run_at": "document_start",
"js": ["popup.js"]
}
]
}
Source: https://developer.chrome.com/extensions/content_scripts
You need the content script.
Content scripts are JavaScript files that run in the context of web
pages. By using the standard Document Object Model (DOM), they can
read details of the web pages the browser visits, or make changes to
them.
Here are some examples of what content scripts can do:
Find unlinked URLs in web pages and convert them into hyperlinks
Increase the font size to make text more legible
Find and process microformat data in the DOM
If your content script's code should always be injected, register it in the extension manifest using the content_scripts field, as in the following example.
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}
Refer this link for more information & implementation.
You can use content script that runs in the context of the page and this way you'll know when the user visits a specific site: https://developer.chrome.com/extensions/content_scripts
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...
}
});