I'm writing a Chrome extension for Twitter that runs fine when I load any twitter page by putting in the URL manually, or when I refresh a twitter page. However, often (though not always) it will not run when I am navigating within twitter. For example, often if I click on someone's profile, the extension doesn't run. But if I refresh the page (still on the profile page) it will run.
I feel like it might be related to this question, Chrome extension is not loading on browser navigation at YouTube, but I'm exactly sure how.
I can tell that it's not running (as opposed to not working in some other way) because I have log a bunch of stuff to the console whenever it runs.
Here is my manifest:
{
"name": "Twitter Extend",
"version": "1.0",
"description": "A sea of white space",
"permissions": ["tabs", "<all_urls>"],
"content_scripts": [
{
"matches": ["http://*.twitter.com/*", "https://*.twitter.com/*"],
"js": ["main.js"]
}
],
"manifest_version": 2
}
Related
I am currently learning js and dom manipulation and I am trying to figure this out since about 24 hours. By now I am completely clueless. I have the following (below) code where I try to DOM manipulate willhaben.at to inject it with some additional information.
The injection only works when I refresh the page or open it in new tab, I know this is because:
The Chrome extension content script will only load when a completely new webpage matching the URL specified in your manifest is loaded. In this era of single page web applications, many websites, including GitHub, use Javascript frameworks and Ajax calls to only update parts of the existing webpage content as the user navigates around the site. Even though the address bar is being updated, most of the time no actual page loads are being executed, so your chrome extension won't trigger.
My manifest:
{
"manifest_version": 3,
"name": "WH",
"version": "1.0",
"description": "...",
"icons": {
"32": "icon.png"
},
"content_scripts": [
{
"matches": ["*://www.willhaben.at/iad/kaufen-und-verkaufen/d/*"],
"js": ["wh.js"],
"run_at": "document_end"
}
]
}
An example script:
const changeThis= document.querySelector('[data-testid="ad-detail-header"]');
changeThis.innerHTML = 'THIS IS NOT WORKING WITHOUT REFRESHING :(';
I've tried to trigger my script if the url changes, I've tried mutationObserver and probably many other things I don't even remember. I can't even get a darn log in to the console after I navigate without a refresh.
I am pretty sure it is something banal but I can't seem to be able to figure it out. Sorry if you would need code snipes of what I've tried by now but I didn't save all the trials I did and it would be a freaking large amount of code snippets.
(before posting I went trough all of the "Review questions already on Stack Overflow to see if your question is a duplicate." but non of them solved my issue on this site. However I tried the below two after while going trough the list)
document.addEventListener("pjax:end", function() {
console.log('pjax:end');
});
Manifest:
"matches": ["*://*.willhaben.at/*"],
Does not work either.
I wanted to make some sort of 'website blocker' (?) chrome extension, that redirects to html page that says website is blocked.
I already have manifest.json:
{
"name": "Redirector",
"version": "1",
"description": "...",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": ["tabs"]
}
and my content.js looks like this:
window.location.assign("index.html");
but every time i enter some website it redirects me from https://currentwebsite.com/ to https://currentwebsite.com/index.html, but i want it to redirect to index.html.
*Sorry for every language mistake.
**I am starting with js, dont flame me for bad code pls.
Simply putting "index.html" indeed won't work, your path should look like "http://index.html", though I don't think that'd be a page that you want to be redirected to. I suggest changing it to simply
window.location.assign("https://google.com");
or you may want to use that to redirect back to previous page:
window.history.back();
I'm writing a chrome extension that uses content script to make Google tasks web UI look a little better. The extension used to work fine, but it didn't work anymore starting from the recent 1~2 days.
After investigation, it seems that content script does not execute in mail.google.com domain. To verify this, I changed manifest to match all web pages:
manifest.json:
{
"manifest_version": 2,
"name": "Tasks",
"short_name": "Tasks",
"description": "Use Google Tasks in a much nicer way.",
"version": "0.0.2",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/script.js"]
}
]
}
js/scipt.js
alert('Content script is alerting.');
With this change, I can see chrome pop up an alert window when I visit pages like https://www.google.com/, https://stackoverflow.com and etc, but NOT https://mail.google.com/tasks/canvas, OR https://mail.google.com/mail.
Is there anything on mail.google.com that prevents content script from executing? How can I fix this? Thanks!
I am following the instructions on developing a WebExtension for Firefox. I have it working for HTML pages. But, I would also like my script to run when the requested "page" is an image. Is this possible?
Here is what I have:
manifest.json:
{
"manifest_version": 2,
"name": "Test",
"version": "1.0",
"applications": {
"gecko": {
"id": "alert#example.com",
"strict_min_version": "42.0",
"strict_max_version": "50.*",
"update_url": "https://example.com/updates.json"
}
},
"description": "Just does an alert.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["alert.js"]
}
]
}
alert.js:
alert("ok");
After installing the plugin by following the instructions (by going to "about: debugging"), I get a JavaScript alert for all HTML pages. But if I navigate to an image (for example by right clicking on an image and choosing "View Image"), no alert occurs.
This is a bug in Firefox that is mostly, but not fully, resolved in Firefox 54 (currently Firefox Beta). Your script (mostly) works as expected (shows the alert when viewing an image from the context menu selection "View Image") in Firefox Beta and Firefox Developer Edition.
The issue I encountered, when testing with Beta and Developer Edition, was that the content script was intermittently not injected when using the forward and back buttons to navigate away from and back to the "View Image" page.
It is possible to be certain that your content script is loaded using tabs.executeScript(), and the events from the webNavigation, webRequest and tabs APIs. However, doing so generically for any content script on any page is...complex (a full generic implementation takes more code than the maximum characters permitted in a Stack Overflow answer).
WebExtensions is actively in development
The WebExtensions API is still in development. What is working improves with each version of Firefox. If you encounter problems, you should test your WebExtension add-on with Firefox Developer Edition, or Firefox Nightly. You should also make careful note of what version of Firefox is required for the functionality you desire to use. This information is contained in the "Browser compatibility" section of the MDN documentation pages.
So I've been trying to send data from a web page to the Chrome Application (not Chrome Extension). Reading stuff around, according to me, this primarily would require the use of url_handlers for invoking Chrome App from a web page, content scripts to inject JS into the web page and/or Messaging for communication between Chrome Application and the web page.
Also, installed App from it's .crx, else loading unpacked directory leads to this error:
"content_scripts is only allowed for extensions and legacy packaged apps, but this is a packaged app."
Now, I tried injecting JS in the required site. However, on inspecting using Chrome Dev Tools, there's no such entry in the Sources->Content scripts section for that site. It simply didn't inject itself when using a Chrome App. It works perfectly with extensions but I want to use Chrome App for other functionalities.
As an alternative, I looked for Messaging examples where its usage is mentioned as:
"... your app or extension can receive and respond to messages from regular web pages."
But, somehow I couldn't get it working.
Any headers on either of the approaches? Other Suggestions?
manifest.json:
{
"name": "App",
"version": "1.0",
"manifest_version": 2,
"minimum_chrome_version": "31",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"permissions": [
{"fileSystem": ["write", "retainEntries", "directory"]},
"storage",
"http://example.com/*"
],
"externally_connectable": {
"matches": ["http://example.com/*"]
},
"content_scripts": [{
"matches": ["http://example.com/*"],
"js": ["content.js"]
}]
}
Indeed, you can't have content scripts in an app.
However, using externally_connectable is valid.
You have already declared that you want to be externally connectable from example.com. (Note: be careful when defining match patterns, for instance this one does not cover www.example.com)
In example.com's own scripts, you can then include the following:
chrome.runtime.sendMessage("idOfYourAppHere", message, function(response) {
/* ... */
});
And in the app (probably its background script) you can catch that with
chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
/* ... */
sendResponse(response);
});
This does require you to know the ID in advance. You can pin it by packing your extension and extracting the "key" field from the manifest. See this question for some more details.