I'm creating my first Chrome extension and the code just seems to not be working. Basically for now, I want the extension to be able to identify a click on an input field and give an alert. I think the extension is not recognizing the click. I've tried multiple things, but here's the most recent code:
manifest.json
{
"name": "Pi",
"version": "1.0",
"description": "Pi works!",
"permissions": ["activeTab", "declarativeContent", "storage"],
"browser_action": {
"default_icon": {
"32": "pie.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}],
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
alert('HELLO WORLD!!');
});
contentScript.js
document.addEventListener('DOMContentLoaded', function(){
document.getElementsByTagName('input').addEventListener("click", function (){
alert("Hi");
});
});
Remove document.addEventListener('DOMContentLoaded', function(){ You actually don't need it. The chrome Browser will decide when to run content script based on run_at settings in the manifest.json default is document_idle. See more here.
GodsArchitect's example is correct for detecting the click event of INPUT tags. However, you may need to consider onFocus event on INPUT tags in case if users use keyboard TAB key to focus into the input field.
const inputTags = Array.from(document.querySelectorAll('input'))
inputTags.forEach(function (input) {
input.addEventListener('focus', function (event) {
alert("Hi...")
}, false)
})
The following does the job.
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName == 'INPUT'){
alert('You clicked an Input!');
}
}, false);
Source: https://stackoverflow.com/a/9012576/10383955
Related
I'm building a chrome extension and I want to add a content to the div element in the compose window of Gmail web page.
By using the inspect tool in chrome, I got the class of the div, prepend the content but it is not showing.
Manifest.json
{
"manifest_version": 2,
"name": "Gmail Extension",
"description": "Personalised extension for gmail",
"version": "1.0",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"content_scripts":[
{
"matches": ["https://mail.google.com/*"],
"js": ["content.js", "jquery-3.3.1.min.js"]
}
],
"permissions": [
"tabs",
"https://mail.google.com/*"
]
}
Content.js
$('div#:ug.J-J5-Ji btx').prepend('<p>Test added</p>');
Image of the compose window, the div highlighted
The text element isn't showing
Thanks
Here's what I did to add a checkbox to the Compose window:
// listen for the event that is fired when the document has finished loading
document.addEventListener('DOMContentLoaded', addUpdateButton, true);
addUpdateButton();
function addUpdateButton() {
var optionsArea = document.getElementsByClassName("aoD az6");
if (optionsArea && optionsArea.length > 0) {
var ecsLabel = document.createElement('label');
ecsLabel.setAttribute('name','ecsslabel');
ecsLabel.innerHTML = "Send as ECS: ";
ecsLabel.setAttribute('id','ecsLabel');
optionsArea[0].appendChild(ecsLabel);
var ecs = document.createElement('input');
ecs.setAttribute('type','checkbox');
ecs.setAttribute('name','ecsbox');
chrome.storage.sync.get("ecs_mode",
function(val) {
ecs.checked = val["ecs_mode"];
});
ecs.setAttribute('id','ecsOption');
optionsArea[0].appendChild(ecs);
}
}
and here's the result (actually, I added several checkboxes, but omitted the code for clarity):
I am trying to create a chrome extension where if user selects the item in any web page and hit Ctrl+n then that highlighted text spelling should be altered. How do i do it? I have tried using background event page functionality where DOMContentLoaded is used so I can use the listener where there is two task, one is to find the highlighted text and another is listen for the event like Ctrl+n and do the work of reversing the spelling of that highlighted text. However, when I select the text, that selected text is not displayed in console either.
I have tried the following way
{
"manifest_version": 2,
"name": "RevText",
"description": "Reverse the spelling of higlighted text",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "html/popup.html",
"default_title": "click me"
},
"permissions": [
"activeTab",
"storage"
],
"options_page": "html/options.html",
"background": {
"scripts": ["js/eventPage.js"],
"persistent": false
}
}
function init() {
textToHyperLink();
}
function textToHyperLink(event) {
console.log(event);
var text = "";
if (window.getSelection) { // when selecting the text, the highlighted/selected text is not shown in console
text = window.getSelection().toString();
// show the popup with the name of highlighted text
console.log(text);
alert(text);
} else if (document.selection) {
text = document.selection.createRange().text;
}
return text;
}
if(document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded',init);
} else {
init();
}
UPDATE
Tried content_scripts as
{
"background": {
"scripts": ["js/eventPage.js"],
"persistent": false
},
"content_scripts": [
{
"matches" : ["http://*/*", "https://*/*"],
"js" : ["js/content.js"]
}
]
}
}
function init(event) {
console.log('event', event);
alert('event');
}
document.addEventListener('keydown',init);
This way, the console does not log anything neither alert box is opened when I click on the text and hit random keys.
I am currently writing a Google chrome extension that needs to run on YouTube videos. I have a content script which is a JavaScript file that does all the work I need it to do.
It is working fine, the only caveat is that for some reason, whenever you click a link to go to a new video, it doesn't run the JavaScript code immediately; you need to reload the page to make it work.
manifest.json
{
"name": "Title",
"description": "description",
"version": "0.5",
"permissions": [
"webNavigation",
"activeTab",
"tabs",
"*://*.youtube.com/*"
],
"browser_action": {
"default_icon": {
"16": "image.png"
},
"default_title": "name",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*.youtube.com/*"],
"js": ["blocker.js"],
"run_at": "document_end"
}
],
"manifest_version": 2
}
blocker.js
myfunction();
function myfunction(){
//manipulate the HTML DOM
}
myfunction();
function myfunction(){
//manipulate the HTML DOM
}
You can put a time interval to detect that the URL changes
var currentURL = location.href;
setInterval(function() {
if(location.href != currentURL) {
myfunction();
currentURL = location.href
}
}, 100);
but I use this
var currentURL = location.href;
window.onclick=function(){
if(currentURL!==location.href){
myfunction();
currentURL = location.href
/*some code*/
}
}
HTML5 introduces a hashchange event which allows you to register for notifications of url hash changes without polling for them with a timer.
window.onhashchange = function (event) {
console.log(location.hash, event.oldURL, event.newURL);
myfunction();
}
I am writing my First Chrome Plugin and I just want to get some text present on the current webpage and show it as a alert when i click the Extension. Lets say I am using any any webpage on www.google.com after some Search query, Google shows something like "About 1,21,00,00,000 results (0.39 seconds) " . I want to show this Text as an alert when i execute my plugin. This is what i am doing.
here is the manifest.json that i am using
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.google.com/*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Here is my popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("checkPage").addEventListener("click", handler);
});`
function handler() {
var a = document.getElementById("resultStats");
alert(a.innerText); // or alert(a.innerHTML);
}
Here is my content.js
// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
// If the received message has the expected format...
if (msg.text === 'report_back') {
// Call the specified callback, passing
// the web-page's DOM content as argument
sendResponse(document.all[0].outerHTML);
}
});
Here is my background.js
var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?google\.com/;
// A function to use as callback
function doStuffWithDom(domContent) {
console.log('I received the following DOM content:\n' + domContent);
}
// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {
// ...check the URL of the active tab against our pattern and...
if (urlRegex.test(tab.url)) {
// ...if it matches, send a message specifying a callback too
chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
}
});
1) run content scrip after document ready ** check "run_at"
"content_scripts": [{
"run_at": "document_idle",
"matches"["*://*.google.com/*"],
"js": ["content.js"]
}],
2) on click of extension make another js to run( popup js). The popup js has access to the ( open page document)
// A function to use as callback
function doStuffWithDom() {
//console.log('I received the following DOM content:\n' + domContent);
//get tabID when browser action clicked # tabId = tab.id
chrome.tabs.executeScript(tabId, {file: "js/popup.js"});
}
3) In popup JS simple you can set alert
var a = document.getElementById("resultStats");
alert(a.innerText); // or alert(a.innerHTML);
Just remove "default_popup" part in manifest.json, as you have listened to chrome.browserAction.onClicked event in background page. They can't live at the same time.
I am trying to fire a notification whenever I double click on a word/select it. Found several examples online but I still cannot get my example working:
Manifest:
{
"name": "hh",
"description": "hh!",
"manifest_version": 2,
"version": "0.0.0.1",
"content_scripts": [
{
"matches": [ "http://*/*", "https://*/*" ],
"js": [ "background.js" ],
"all_frames": true,
"run_at": "document_end"
}
],
"permissions": ["storage", "notifications"],
"icons": { "128": "neoprice.png" }
}
background.js
var listener = function(evt) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
displayPrice();
var range = selection.getRangeAt(0);
var text = range.cloneContents().textContent;
console.log(text);
}
};
document.addEventListener('dblclick', listener);
function displayPrice(){
chrome.notifications.create(getNotificationId(), {
title: "message.data.name",
iconUrl: 'hh.png',
type: 'basic',
message: "message.data.prompt"
}, function() {});
}
// Returns a new notification ID used in the notification.
function getNotificationId() {
var id = Math.floor(Math.random() * 9007199254740992) + 1;
return id.toString();
}
I was earlier adding the following but I saw people weren't using it, so I removed it
"app": {
"background": {
"scripts": ["background.js", "assets/jquery.min.js"]
}
},
What I am trying to achieve: Whenever they go to ANY page on selecting a word, it fires the function. Later, I wish to use this for a specific page. :)
Tried: How to keep the eventlistener real time for chrome extensions?
Chrome extension double click on a word
https://github.com/max99x/inline-search-chrome-ext
Both don't really work as I want them too. :(
Solution
It seems you are confused with background page and content script. Your background.js is a content script in fact, though its name is "background". While chrome.notifications api can be only called in background page, trying commenting displayPrice function will make your code work.
Next step
Take a look at above tutorials, wdblclick event triggers, use Message Passing to communicate with background page and call chrome.notications api in background page.
What's more
The following code is used in chrome apps rather than chrome extension.
"app": {
"background": {
"scripts": ["background.js", "assets/jquery.min.js"]
}
},