I wrote a Chrome Extension page action, with the following implementation:
In manifest.json:
"permissions" : [
"declarativeContent"
],
In background.js:
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlMatches: 'www\.somewebsite\.com/(translate|revise)/' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
I noticed that in most Chrome browsers, the page action icon appears correctly inside the address and only appears when the matching page is met:
However, in some browsers recently page actions started appearing as enabled/disabled browser actions, i.e. outside the address bar, which is a lot clumsier because the whole idea around page actions icons is that they appear if and only if the page is relevant to them. There is no point showing a disabled page action for most of the time. Actually, it happened to browsers where it used to work well days ago, like if a Chrome update had some side effects.
I presume this is related to some Chrome setting that now shows all extensions there, but is there any way I can force the page action to appear consistently in the address bar and only appear when it can be really useful?
It appears like this is the result of a new update to Chrome, with the developers probably reasoning that most users would not know that they had extensions installed otherwise.
Link to announcement: https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ
It doesn't look like extension developers can do anything about this, but I really hope Google reverts this change.
Related
I am trying to create chrome extension that will scrap data from my webpage and then will display it in browser action window. I wanted to use background page for this, cause if i understand extensions correctly, it is only element capable of non-stop working, without need of visible tab.
The problem is, the script i wrote for background.js doesn't work properly, when i use background.js:
var location = window.location.href = 'http://localhost/index.php';
console.log(location);
manifest.json:
"background": {
"scripts": ["src/background/background.js"]
},
The answer i get is chrome-extension://some_random_text/_generated_background_page.html.
It is possible to use background pages to navigate to my webpage, then fill some forms and scrap data for later use?
This is an old question, but I recently wanted to do exactly the same.
So I'll provide an answer for others who are interested.
Setting window.location still does not work in Chrome52.
There is a workaround though. You can first fetch the web page with fetch(), and then use document.write to set the content.
This works fine, and you can then query the document and do everything you want with it.
Here is an example. (Note that I'm using the fetch API, arrow functions and LET, which all work fine now in Chrome52).
fetch("http://cnn.com").then((resp) => {
return resp.text();
}).then((html) => {
document.open("text/html");
document.write(html);
document.close();
// IMPORTANT: need to use setTimeout because chrome takes a little
// while to update the document.
setTimeout(function() {
let allLinks = document.querySelectorAll('a');
// Do something with the links.
}, 250);
});
A chrome extension has two main parts, the extension process and the browser itself. The Background Page works on the extension process. It does not have direct access and information about your webpages.
To have scripts working non-stop on your webpages, you will need to use Content Scripts.
You can then communicate between your Content Script and your Background Page using messages
contentScript.js
var location = window.location.href = 'http://localhost/index.php';
chrome.runtime.sendMessage({location: location}, function(response) {});
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request.location);
});
I want to ask is there ANY way or extension that can pre-highlight text within the iframe whenever a new window is opened containing iframe? I have tried many extension but none of them works.
I need to filter out content based on certain keywords and the content is within iframe. I can do it with CTRL+F but there are many keywords like 10-15 within each article to be found. So it makes my job very tough and time consuming. Few extensions that I have tried from chrome are multi highlighter, pearls, FF but none of them seems to work.
I also know the reason why these extension can't access content within the iframe i.e. due to cross origin policies.
But I also remember around an year ago I worked with chrome extension named 'Autofill' that could pre-select form elements whenever I opened new chrome window containing iframe.
So is there any work around?
You can set your extension permission to run content scripts in all frames as document at http://developer.chrome.com/extensions/content_scripts.html#registration by setting all_frames to true in the content scripts section of your manifest file. Adding to Google's example from that page, part of your manifest file might look like
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
You'll need to be careful since your content scripts are going to be inject into the page once for the parent page and one for each iFrame on the page. Once your content script is injected into all frames on the page you can work your magic with finding and highlighting text.
if (window === top) {
console.log('Running inside the main document', location.href);
} else {
console.log('Running inside the frame document', location.href,
[...document.querySelectorAll('*')]);
}
I'm trying to work on a Chrome browser extension which does fun things on a contextmenu. The problem is, I can't get the JS files to load within the manifest.json content_scripts.
I don't receive an error, the files simply do not load.
The scripts are good, if I put them in my background page, they fire fine through that background page. The downside of that is it's restricted to only the background page.
{
"name": "Mini",
"description": "Mini",
"permissions": ["contextMenus","management","contentSettings","tabs","http://*/*","https://*/*","editable"],
"version": "0.1",
"manifest_version": 1,
"background_page": "mini.html",
"icons" : {"16" : "mini.png"},
"contexts" : ["link","tab","page"],
"content_scripts": [{"matches":["<all_urls>"],"js":["jquery172min.js","mini.js"]}]
}
I've tried all forms of matches, including "http://\*/\*", "https://\*/\*", "\*://\*/\*"
I've tried whitespaces, no whitespaces. I'm drawing a blank here.
Any help would be appreciated.
$(document).ready(function () {
alert("page is ready");
},true);
My apologies for that. This is a copy of the javascript/Jquery I'm using to test whether the extension has loaded or not. It's just a simple alert.
Content scripts cannot use the chrome.contextMenus API (in fact, these can only use some of the chrome.extension methods).
It's possible to apply match patterns to individual menu items, via chrome.contextMenus.create({title: 'Test', documentUrlPatterns: 'http://*/*'});.
Created menu items can also be modified (chrome.contextMenus.update) and removed (chrome.contextMenus.remove).
To communicate between a Content script and the background page, see Message passing.
I'm building a Google Chrome extension, and I'm trying to get the selected window in a popup. (I'm talking about the popup that shows when you click on the extension icon).
I tried to use the documentation, but I didn't understand it well. Specifically, I tried to use:
chrome.windows.getCurrent(function(w) {
chrome.windows.get(w.id,
function (response){
alert(response.location.href);
});
});
But it didn't work. Any ideas?
Thanks
(sorry if the English is bad).
1) have you added the "tabs" permission to the manifest?
{
"name": "My extension",
...
"permissions": ["tabs"],
...
}
2) It also looks like you should be using the tabs API and not the windows API if you want to know the current URL of the selected tab in the current Window
chrome.windows.getCurrent(function(w) {
chrome.tabs.getSelected(w.id,
function (response){
alert(response.url);
});
});
I was looking for a way to detect the browser extension I am building from my website and I need to alert my users in-case they are viewing my site without it. I have been able to do this in firefox, but I want to know is there a way I can do this in Google Chrome? Even if there is a hack to get this going I am fine.
Sure. Create a content script specific to you site in the extension, and make it add an invisible marker in the DOM, eg:
$('body').append('<div style="display: none;" class="extension_enabled" />');
In the page, set a short timeout to check for this after the document is fully loaded, eg:
$(function() {
setTimeout(function() {
if ($('.extension_enabled').length > 0) {
alert('Installed!');
} else {
alert('Not installed.');
}
}, 500);
});
NOTE: Code in jQuery format for simplicity. You can do it with raw javascript, of course.
The official Google Chrome Extensions Developers' Guide has an item covering exactly this.