I'm trying to get tweets on my timeline using a Chrome Extension.
I'm selecting elements using the following query -
const tweets = document.querySelectorAll("[data-testid='tweetText']");
I'm running this in the contentScript.js at 'document_idle'
I keep getting an empty NodeList.
Here is my manifest.json
{
"manifest_version": 3,
"name": "Mute",
"version": "0.1.0",
"description": "My Chrome Extension",
"icons": {
"16": "icons/icon_16.png",
"32": "icons/icon_32.png",
"48": "icons/icon_48.png",
"128": "icons/icon_128.png"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Mute"
},
"permissions": [
"activeTab",
"scripting"
],
"content_scripts": [
{
"matches": [
"https://twitter.com/home"
],
"run_at": "document_idle",
"js": [
"contentScript.js"
]
}
]
}
This is a sample MutationObserver.
manifest.json
{
"name": "MutationObserver",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"matches.js"
]
}
]
}
matches.js
console.log("MutationObserver:Start");
const onMutation = (mutations) => {
// mo.disconnect();
for (const { addedNodes } of mutations) {
for (const node of addedNodes) {
if (node) {
if (node.dataset && node.dataset.testid) {
// console.log("node.dataset.testid=" + node.dataset.testid)
if (node.dataset.testid == "cellInnerDiv") {
const tweets = node.querySelectorAll("[data-testid='tweetText']");
console.log(tweets);
}
}
}
}
}
// observe();
}
const observe = () => {
mo.observe(document, {
subtree: true,
childList: true,
});
}
const mo = new MutationObserver(onMutation);
observe();
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 am making a chrome extension, and trying to send a message from the chrome extension page to the content.js. I know that in order to that I need to send the message to the bakcground.js and forward it to the content.js by sending it to either a specific tabs. I hvae done that many times and have not had any issues, but this time it just doesn't work.
main.js file (from the extension page):
chrome.runtime.sendMessage({
name: "stop"
})
background.js:
chrome.tabs.query({}, tabs => {
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].status == "complete") {
chrome.tabs.sendMessage(tabs[i].id, { msg: "Hello" })
}
}
})
content.js:
function recieve(msg) {
console.log(msg)
}
chrome.runtime.onMessage.addListener(recieve)
manifest.json:
{
"manifest_version": 2,
"name": "app",
"description": "app description",
"version": "3.0.0",
"icons": {
"19": "./images/icon_19.png",
"128": "./images/icon_128.png",
"150": "./images/icon_150.png"
},
"browser_action": {
"default_title": "title"
},
"permissions": [
"tabs",
"alarms",
"notifications"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"jquery-3.4.1.min.js",
"content.js"
]
}
],
"background": {
"scripts": [
"background.js"
]
}
}
I'm trying to use a variable I created in content.js in my background.js file.
Currently, when I try to use a variable in my background.js that was created in my content.js, I get a chrome error saying "Unexpected Identifier" (referencing ContentTag1 in background.js)
Do you know how I can do this?
Code from my Background.js File
function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
if data[i].DBTag == ContentTag1 {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data[i].Name + ' ' + data[i].Price;
mainContainer.appendChild(div);
}
}
}
Code from my Content Script
var ContentTag1 = "test";
var ContentTag2 = "test";
var ContentTag3 = "test";
Manifest Below:
{
"name": "App",
"version": "1.0",
"description": "Description",
"permissions": [ "activeTab", "declarativeContent", "storage", "http://localhost:3000/brands"],
"background": {
"scripts": [ "js/lib/jquery.min.js", "js/app/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [ "https:/somesite*" ],
"css": ["style.css"],
"js": [
"js/lib/jquery.min.js",
"js/app/content.js"
],
"all_frames": false
}
],
"web_accessible_resources": ["content.html",
"content.css",
"css/popup.css"
],
"browser_action": {
"default_popup": "views/popup.html",
"default_icon": {
"16": "images/someimage.png",
"32": "images/someimage.png",
"48": "images/someimage.png",
"128": "images/someimage.png"
}
},
"icons": {
"16": "images/someimage.png",
"32": "images/someimage.png",
"48": "images/someimage.png",
"128": "images/someimage.png"
},
"manifest_version": 2
}
You should send a message from content and add a listener on background
here an answer that show example of that.
Also you may find here the documentation about messaging in chrome extention.
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?
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: