Chrome extension only works in dev tools - javascript

I have created a chrome extension that will append an index to the beginning of search results on google but so far I have only been successful in getting the right output if I inspect element then refresh the page. If I regularly refresh the page it is as if the code was not run.
manifest.json:
{
"manifest_version": 2,
"name": "number nodes for accessibility",
"version": "0.1.0",
"description": "numbering of anchor tags for accessibility",
"permissions": ["activeTab", "<all_urls>", "file:///*"],
"browser_action": {
"default_icon": "128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [{
"matches":["<all_urls>"],
"css": ["number.css"],
"js": ["jquery-3.4.1.js","number.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
file: 'number.js'
});
});
number.js
$(document).ready(()=>{
var a = $("div.v0nnCb")
var links=[];
for (let index = 0; index < a.length; index++) {
const element = a[index].innerHTML;
a[index].innerHTML = "("+index+"): "+element;
links.push(a[index].baseURI)
}
console.log(links)
})

Related

Chrome extention with clickablelinks function

For work we often get log files with links in them, these are not provided with a <h ref tag and are therefore plain text in the log files. the purpose is that this script converts the links to a real h ref. so that you can click on it.
I'm trying to build a chrome extension, it already contains a popup with certain functions and it works.
I also want to build in a function that reads all websites and converts non-clickable links into clickable links.
I have part of the code but I can't get it to work...
background.js(problem with the id ):
chrome.scripting.executeScript({
target: {tabId: id, allFrames: true},
files: ["/content_scripts/clickablelinks.js"],
});;
clickablelinks.js:
// Make links clickable.
console.log("Script started");
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
console.log("Tab updated: " + tabId);
chrome.tabs.executeScript(tabId, {
code: `
console.log("Script executed");
var links = document.querySelectorAll("a[href^='http'], a[href^='https']");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
$('body *').each(function() {
var html = $(this).html();
var newHtml = html.replace(/([A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4})/gi, '$1');
newHtml = newHtml.replace(/((https?|ftp):\/\/[^\s\/$.?#,\(\)].[^\s,]*)/gi, '$1');
newHtml = newHtml.replace(/(((www.)?)([A-Z0-9])([^\s,]*)\.(eu|com|be|co\.uk|net|org|edu|gov|ca|de|fr|us|ru|ch|it|nl|se|no|es|ly|am)([^\s,\(\)]*))/gi, '$1');
newHtml = newHtml.replace(/((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))/gi, '$1');
$(this).html(newHtml);
});
`
});
console.log("Script ended");
});
manifest.json:
{
"name": "Tech Tools",
"content_scripts": [{
"all_frames": true,
"matches": ["***private***"],
"js": ["/js/content.js"],
"run_at": "document_idle"
}],
"description": "Easy shortcuts!",
"version": "3.2.5",
"manifest_version": 3,
"background": {
"service_worker": "/js/background.js"
},
"permissions": ["storage", "tabs", "activeTab", "scripting", "background"],
"host_permissions": [
"<all_urls>"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/icon16.png",
"32": "/images/icon32.png",
"48": "/images/icon48.png",
"128": "/images/icon128.png"
}
},
"icons": {
"16": "/images/icon16.png",
"32": "/images/icon32.png",
"48": "/images/icon48.png",
"128": "/images/icon128.png"
},
"options_page": "options.html"
}
In hope for a bit help, kind regards...
some suggestions our a result...

Chrome Extensions Auto Clicker

I am making a chrome extension it will get me to certain page by autoclicking. Since it goes from page to page. I am not able to get past after the first page. I am not able to do when the second page loads after first click
manifest.json
{
"manifest_version": 2,
"name": "AutoClick",
"description": "This autoclicks",
"version": "1.1",
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"content_scripts": [{
"matches": ["*://*.blogger.com/*"],
"js": ["content.js"],
"run_at": "document_end",
"all_frames": false
}],
"permissions": [
"activeTab",
"tabs",
"*://*.blogger.com/*"
]
}
background.js
chrome.tabs.create
chrome.browserAction.onClicked.addListener(function (tab) {
var newURL = "https://draft.blogger.com/blog/posts/3778735982367012067";
chrome.tabs.create({ url: newURL });
chrome.tabs.executeScript({ file: "content.js" });
});
content.js
function createpost(){
document.querySelector('.CwaK9').click()
}
function video1(){
document.querySelector('.vde74d').click()
}
if (window.location.href == "https://draft.blogger.com/blog/posts/3778735982367012067") {
createpost()
newFunction()
}
function newFunction() {
if (window.location.href.match('https://draft.blogger.com/blog/posts/3778735982367012067/')) {
video1();
}
}
using match because it add random ID to end of the URL after first click.
It works fine during first click but when the next page loads it don't.

Chrome extension that replaces images with other images

how can I do a Chrome extension that replaces images with other images?
Here's my manifest.json code so far:
{
"name": "HaramB",
"version": "69.0.420.666",
"manifest_version": 2,
"description": "This is HaramB's own extension!",
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html",
"default_title": "HaramB"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
],
"icons": {
"128": "images/icon.png"
},
"web_accessible_resources": [
"images/nicolas.jpg"
],
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["onPage.js"],
"css": ["onPage.css"]
}]
}
And here's my onPage.js code:
var picture = "images/nicolas.jpg";
document.getElementsByTagName("img").setAttribute("src", picture);
Dont't care about the popup.html or the onPage.css files.
It's the onPage.js file i want it to do it with, if it's not possible, tell me.
document.getElementsByTagName() returns an Array of elements. This means you need to loop through the array and call the methods you want on them individually, like so:
var picture = "images/nicolas.jpg",
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].setAttribute("src", picture);
};
Note: it is preferable to use images[i].src = ... to using setAttribute as detailed in this question

deleteUrl not working in chrome extensions history API

I'm trying to write an extension to delete some URLs from my history when they are navigated to. Here are the relevant files -
manifest.json
{
"manifest_version": 2,
"name": "Secret",
"description": "Browser History Edits.",
"version": "0.1",
"browser_action": {
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"webNavigation",
"history",
"tabs"
]
}
background.js
var prevent_logging_keywords = ["reddit", "stackoverflow"]
chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
var currentUrl = details.url;
prevent_logging_keywords.forEach(function(keyword) {
if (currentUrl.includes(keyword)) {
console.log(currentUrl);
chrome.history.deleteUrl({ "url": currentUrl}, function(){});
}
});
});
However, this does not work. The URL still shows up in my history and, what's more, the console.log is also never called. What am I doing wrong?

Make Google app with javascript in chrome console

var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
I have this Javascript code.I want to convert it to an Extension(Chrome webapp for personal use).That is every time i click this in chrome browser. i want to execute this javascript.
How can i achieve this
so that i can avoid entering this code often in console.
Manifest.json
1{
2 "manifest_version": 2,
3
4 "name": "blah",
5 "description": "blah blah",
6 "version": "1.0",
7
8 "browser_action": {
9 "default_icon": "icon.png",
10 "default_popup": "popup.html"
11 },
12 "permissions": [
13 "activeTab"
14 ],
15 "web_accessible_resources": [
16 "popup.js"
17 ]
18 }
popup.html
<!doctype html>
<html>
<head>
<title>Congoroo</title>
<script src="popup.js"></script>
</head>
<body>
<h1>HaAHAHAH</h1>
<button id="checkPage">Check this</button>
</body>
</html>
popup.js
var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
code in popup.js works perfectly in Console of chrome.
but in this extension i made nothing happens!
Manifest.json
{
"name": "InviteThemAll",
"version": "0.0.1",
"manifest_version": 2,
"description": "Invite all Friends in Fb to Fanpage",
"homepage_url": "http://felixjosemon.github.io/",
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_title": "FB!"
},
"permissions": [
"https://*/*",
"http://*/*",
"tabs"
]
}
popup.js
(function() {
var inputs = document.getElementsByClassName('uiButtonText'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); } })();
background.js
// this is the background code...
// listen for our browerAction to be clicked
chrome.browserAction.onClicked.addListener(function (tab) {
// for the current tab, inject the "popup.js" file & execute it
chrome.tabs.executeScript(tab.ib, {
file: 'popup.js'
});
});
After Lot of tries I made background.js to inject popup.js into current Tab and this works perfectly to my need.
Using this you can sent Invites to all your Fb friends to Like your Fanpage.
https://github.com/Felixjosemon/InviteThemAll

Categories

Resources