I am trying to learn about chrome extensions but I am not able to understand how to manipulate DOM of a page using content_scripts.
manifest.json
{
"name": "First",
"version": "1.0",
"manifest_version": 2,
"description": "First extension",
"background": {
"scripts": ["test.js"]
},
"page_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "popup1.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"permissions" : [
"tabs",
"http://*/*"
]
}
test.js
function check(tab_id, data, tab){
if(tab.url.indexOf("google") > -1){
chrome.pageAction.show(tab_id);
}
};
chrome.tabs.onUpdated.addListener(check);
popup1.js
function myfunc(){
var x = $('#options option:selected').text();
$("body").append('Test');
alert(x);
//window.close();
}
$(document).ready(function(){
$('#options').change(myfunc);
});
The above code/extension works fine because myfunc gets called but it doesn't inject Test into the body of google.com.
So, where am I going wrong in accessing/manipulating the DOM.
If you want to play with browser tab DOM on event of popup. In this case you have to pass a message to content script from background script, or inject JavaScript into content script : have a look
manifest.json
{
"name": "First",
"version": "1.0",
"manifest_version": 2,
"description": "First extension",
"background": {
"scripts": ["test.js"]
},
"page_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "content_script.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"permissions" : [
"tabs",
"http://*/*"
]
}
content_script.js
function myfunc(){
var x = $('#options option:selected').text();
$("body").append('<div style="width:200px; height:200px; border: 1px solid red;"></div>');
}
$(document).ready(myfunc);
Now you will get A box with red border at the bottom of the page.
popup.js
function myfunc(){
var x = $('#options option:selected').text();
chrome.extension.sendMessage({sel_text: x});
}
$(document).ready(function(){
$('#options').change(myfunc);
});
test.js (used in background)
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
appendTextToBody(request.sel_text);
});
function appendTextToBody(text) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {"code" : '$("body").append("Test : "'+text+');'}) ;
});
}
function check(tab_id, data, tab){
if(tab.url.indexOf("google") > -1){
chrome.pageAction.show(tab_id);
}
};
chrome.tabs.onUpdated.addListener(check);
Related
I am new to extensions. my extension's purpose is to save the URLs of all tabs ever opened on the browser. This is my background script so far:
var URLs = [];
chrome.history.onVisited.addListener(storeURL);
chrome.storage.onChanged.addListener(function (changes, namespace) {
for (let [URL, { oldValue, newValue }] of Object.entries(changes)) {
URLs[URLs.length] = newValue;
}
});
function storeURL(HistoryItem) {
console.log("entered in storeURL function", HistoryItem)
chrome.storage.sync.set({ URL: HistoryItem?.url }, function () {
console.log('URL is set to ' + HistoryItem?.url);
});
}
The problem is that i am able to access the current url in developer tools but its not being stored in URLs.
Note: I want the extension to be autonomous and not popup. my manifest.json:
{
"name": "URL tracker",
"version": "0.0.1",
"manifest_version": 3,
"description": "Stores the browser URLs",
"action": {
"default_popup": "url.html",
"default_icon": "logo-small.png"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": [],
"js": ["content.js"]
}
],
"icons": {
"128": "logo-small.png",
"512": "logo-small-2.png"
},
"permissions": [
"history",
"tabs",
"activeTab",
"storage"
]
}
I need to find the id of the element that holds text that I've selected, and I've been unsuccessful at finding a way to do this. It looks like the problem is with the fact that you can't use a getAttribute method on a window object. I am using a content script that communicates with an event page to carry it out. This is my content script:
let element = window.getSelection().anchorNode;
let finder = element.getAttribute('id');
alert(finder.toString()); //test
This is my event page:
chrome.contextMenus.create({ id: "M", title: "Feature One", contexts: ["selection"] });
chrome.contextMenus.create({ id: "ATCB", title: "Feature Two", contexts: ["selection"] });
chrome.contextMenus.onClicked.addListener(function(clickData){
if (clickData.menuItemId == "M" && clickData.selectionText){
//var one = clickData.selectionText;
chrome.tabs.executeScript({
file: 'contentScript.js'
});
}
if (clickData.menuItemId == "ATCB" && clickData.selectionText){
var two = clickData.selectionText;
alert(two + " two"); //test
}
});
And this is my manifest file:
{
"manifest_version": 2,
"name": "Menu",
"version": "1.0",
"icons": {
"128": "icon.png",
"48": "icon.png",
"16": "icon.png"
},
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}],
"permissions": [
"contextMenus",
"tabs",
"activeTab",
"file://*/*",
"https://*/*",
"http://*/*"
]
}
Thank you for reading my question
This can be accomplished with document.activeElement.id;
https://www.w3schools.com/jsref/prop_document_activeelement.asp
I'm building a Chrome Extension that expands all collapsed text on a a web page.
Heres a snippet of the code:
manifest.json
{
"manifest_version": 2,
"name": "filterq2",
"version": "1.0",
"icons": {
"128": "icon_16.png"
},
"browser_action": {
"default_title": "Preguntas"
},
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["https://www.quora.com/*"],
"js": ["contentScript.js"],
"run_at": "document_end"
}],
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
contentScript.js
function eventFire(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
var losExpandibles = document.getElementsByClassName("ui_qtext_more_link");
for (var i = 0; i < losExpandibles.length; i++) {
eventFire(losExpandibles[i], 'click');
}
I try to simulate a left click of the mouse on every element with class name: "ui_qtext_more_link" but the for loop breaks after first pass.
But if I run it in the console it works on every element just fine. What am I missing?
In chrome documentation, we can send message from option page by using:
chrome.runtime.sendMessage
We cannot use:
chrome.tabs.sendMessage
I want to send message from option page to content script. Can I do it directly?
This is my option page script:
document.addEventListener("DOMContentLoaded", function() {
var radio = document.querySelectorAll("input[type=radio][name=quality]");
for(i=0; i<radio.length; i++)
radio[i].addEventListener("change", function(){
val = this.id;
localStorage.setItem("youtube_filter_video_quality", val);
chrome.runtime.sendMessage({"youtube_filter_video_quality": val});
});
});
And here is content script:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.youtube_filter_video_quality!==undefined){
console.log(request.youtube_filter_video_quality);
}
}
);
And here is manifest.json:
{
"name": "__MSG_name__",
"short_name": "__MSG_short_name__",
"manifest_version": 2,
"version":"1.5.0.0",
"description": "__MSG_description__",
"default_locale": "en",
"browser_action": {
"default_icon": "48.png",
"default_title": "__MSG_default_title__",
"default_popup": "popup.html"
},
"background":{
"page":"background.html",
"persistent": false
},
"content_scripts":[
{
"matches": [ "*://*.youtube.com/*" ],
"css": ["app_player.css"],
"run_at": "document_end"
}
],
"permissions": [
"tabs",
"activeTab",
"storage",
"<all_urls>",
"webNavigation"
],
"icons": {
"64":"64.png",
"48": "48.png",
"32":"32.png",
"16": "16.png",
"128": "128.png"
},
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "option.html"
}
}
The console.log cannot write anything (blank).
manifest.json:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"content_scripts": [
{
"matches": [
"https://opskins.com/*"
],
"js": ["jquery-3.2.1.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
content.js:
var sticker = document.body.querySelector('.sticker');
if (sticker) {
var stickerTitle = sticker.getAttribute('title');
}
console.log(stickerTitle)
https://opskins.com/?loc=shop_browse&app=730_2
works with the page. But the console response is undefined.
That's what I need: