I've looked at some similar threads in SO but I couldn't understand the solutions.
Here is my code:
manifest.json
{
"name": "Test 5",
"version": "1.0.0",
"manifest_version": 2,
"permissions": [
"storage",
"tabs",
"http://*/*"
],
"web_accessible_resources": ["jquery-2.0.3.min.map"],
"content_scripts": [
{
"matches": [
"*://*.google.es/*"
],
"js": ["jquery.js", "content_scripts.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
content_scripts.js
var doFilter = function() {
var classR = document.getElementsByClassName("rc");
console.log("2");
console.log("classR: "+classR.length );
//...etc
}
$(window).load(function() {
console.log("1");
doFilter(document.body);
});
The code is already loaded as a Chrome unpacked extension. I'm using Dev Tools in Chrome to debug it from the local files in my PC.
When having Dev Tools opened in the same tab as the web browser, I browse to "www.google.es" and I search for some keyword.
Then I'm able to see in Dev Tools console logs. The problem is that the last one shows that classR has length 0.
As you can see, there are elements by class name "rc", so it seems
document.getElementsByClassName("rc")
is actually not accessing to the loaded HTML document.
What am I missing here?
Thanks.
Related
I'm trying to build a Chrome Extension for my work that will help me with day-to-day work. Without getting into specifics I'm seeing that it's running on all pages that I load except for company pages. It's also not running on Google.com (which could be an indicator for the former issue).
Note - I tested and it run on Stackoverflow, IMDB, many more, but not Google.com.
I'm wondering is there something wrong with my manifest.json file or perhaps Google and other sites have some tough restrictions for outside JS.
Manifest.json
{
"name": "Screenshot Expander (Alpha)",
"version": "1.0.0",
"description": "Preview screenshots directly in the same page",
"manifest_version": 3,
"author": "Josh Gallant",
"action":{
"default_popup": "index.html",
"default_title": "Screenshot Expander"
},
"content_scripts" : [{
"js" : ["screenshot123.js"],
"matches" : ["*://*/*"],
"run_at": "document_end"
}],
"host_permissions": [
"<all_urls>"
],
"permissions": [
"tabs",
"scripting",
"activeTab"
],
"web_accessible_resources": [
{
"resources": [ "screenshot123.js" ],
"matches": [ "https://*/*" ]
}
]
}
screenshot123.js
function main(){
console.log('hello there');
}
window.onload = main;
Main question - Why is the above code working on most sites, but not google.com?
Any help is appreciated.
Thanks!
I am trying to define a new hotkey in Google documents. I am trying to use a Chrome extension, the problem is when the document area is active, the browser can't listen to the event fired. Here's the extension code.
Edit: Here's the manifest file
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["jquery-3.2.1.js", "content.js"]
}
],
"permissions": [
"tabs"
]
}
Here's the content.js file
var map = {17: false};
$('body').keydown(function(e) {
if (e.keyCode in map) {
map[e.keyCode] = true;
if (map[17]) {
console.log("Hi");
}
}
}).keyup(function(e) {
if (e.keyCode in map) {
map[e.keyCode] = false;
}
});
The above extension works fine on any website. When you press ctrl, it will log "Hi". The extension works fine on any website and in Google Docs itself if the upper bar that contains the menus is active. It logs Hi when the ctrl key is pressed. But when the document area is active, the code doesn't fire.
Background: I am thinking of having the ability to use Chrome extensions with Google Apps Script to define custom hotkeys, just faced the problem of not firing events in the active document area.
While it is not visible, Docs editing content is within an iframe. Your content_script is not loading on iframes.
You can enable this by adding to new rules to your content_scripts in manifest.json:
"all_frames": true,
"match_about_blank": true
The first allows your code to load on frames. The second one allows to load on empty pages (and frames). Together with your current manifest.json:
{
"manifest_version": 2,
"name": "My Cool Extension",
"version": "0.1",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.js", "content.js"],
"all_frames": true,
"match_about_blank": true
}
],
"permissions": [
"tabs"
]
}
Use the chrome.commands API instead of jQuery.
I am working with a chrome extension . I want to inject js script in all tab. I am using this manifest.json :
{
"name": "ABC",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"src/background/background.min.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/128.png",
"default_title": "ABC",
"default_popup": "src/browser_action/index.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["./src/inject/inject.min.js"],
"css": ["./css/inject.min.css"],
"all_frames": true
}]
}
And my inject.js is like this :
(function() {
console.log("Hello");
});
I am getting all log from all tab except the tab of the chrome setting (eg : chrome://extensions/:id , chrome://history etc).
Am I missing something in manifest.json or chrome disables the feature of injection in settings page ?
Thanks in advance.
Indeed, you can't inject code into chrome:// pages. They contain control elements / code that can modify the browser in ways that an extension is not allowed to.
Chrome resolves this by simply not allowing permissions to be set for chrome:// URLs, and <all_urls> does not include it.
However, you could use Override Pages to replace some of them (well, History page at least) completely.
I want to create a new chrome extension but it don't work.
I want to inject a js file into web page (all web page,not only one.If i push the chrome icon on google the script must execute,if i push the icon on facebook it must execute ect.)
this is background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
null,{file: "backgrounds.js"} });
});
this is backgrounds.js
document.body.innerHTML="display div elem with style and id";
this is manifest.json
{
"name": "MyExt",
"description": "an extension,what else?",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["background.js"]
}
],
"browser_action": {
"default_title": "myExt"
},
"manifest_version": 2
}
what i wrong?
I'm on windows 8.1 Update 1 with chrome last version
Your manifest is wrong: you should set background.js as your background script:
"background" : { "scripts" : [ "background.js" ] },
and remove the "content_scripts" section.
The "activeTab" permission means that you don't need to specify host permissions to inject in the current tab upon browser action click, so no other permissions are needed.
The tabId argument is optional, you can just drop it instead of passing null. And your invocation is wrong (you're wrapping two arguments in a single object). Here's the correct way:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "backgrounds.js"});
});
I want to activate some Scripts on twitch.tv with a chrome extension.
So I got a file called script2.js and a file called script3.js
In my manifest, I want to say www.twitch.tv is loaded script2.js has to be loaded, and if www.twitch.tv/directory is loaded, script3.js has to be loaded:
{
"content_scripts": [{
"js": [ "script2.js" ],
"matches": [ "*://*.twitch.tv/" ]
}, {
"js": [ "script3.js" ],
"matches": [ "*://*.twitch.tv/directory" ]
} ],
"description": "desc",
"manifest_version": 2,
"name": "TwitchTV",
"permissions": [ "*://*.twitch.tv/*" ],
"version": "1.0"
}
script2 is loaded, but script3 not. Am I doing something wrong?
EDIT:
Well with looking into the manifest I mentioned, the manifest is right.
I added an alert("test"); on top of my script and the alert is triggerd, so the script is executed correctly. But:
I add some new Buttons onto the site. And if I copy&paste my script3.js to the chrome-console on twitch.com/directory, the new buttons will be shown. But if the script is executed by chrome the buttons are not there.
Why could this be, that the script seems to be correct (because if i load it manually it works) but if its loaded automatically its wrong?
Reverse the two rules, because the first will always match
{
"js": [ "script3.js" ],
"matches": [ "*://*.twitch.tv/directory" ]
},
{
"js": [ "script2.js" ],
"matches": [ "*://*.twitch.tv/" ]
}]