I started using crossrider, actuly I have just registered my self
/************************************************************************************
This is your Page Code. The appAPI.ready() code block will be executed on every page load.
For more information please visit our docs site: http://docs.crossrider.com
*************************************************************************************/
appAPI.ready(function($) {
// Place your code here (you can also define new functions above this scope)
// The $ object is the extension's jQuery object
alert("My new Crossrider extension works! The current page is: " + document.location.href);
});
And this does not alerts me when page loads.
Related
I was trying to use this bookmarklet:
javascript:void((function(doc){if(typeof jQuery=='undefined'){var script_jQuery=document.createElement('script');script_jQuery.setAttribute('src','https://code.jquery.com/jquery-latest.min.js');document.body.appendChild(script_jQuery);console.log('jQuery included ^_^');}else{console.log('jQuery already included ...');}})(document));
to inject jQuery into this page:
https://cn.bing.com/dict/?mkt=zh-cn&q=test
I opened the page, then opened developer console(I'm using Chrome), switched to network tab, then clicked on the bookmarklet, I noticed that Chrome didn't request https://code.jquery.com/jquery-latest.min.js, instead it requested the following url:
https://cn.bing.com/fd/ls/l?IG=EE977A4E38924F57B34A1371C04323C1&Type=Event.ClientInst&DATA=[{%22T%22:%22CI.AntiMalware%22,%22FID%22:%22CI%22,%22Name%22:%22AC%22,%22Text%22:%22S%3Ahttps%3A//code.jquery.com/jquery-latest.min.js%22}]
Does anyone know why the bookmarklet doesn't work on this page? how is this page redirecting the request?
That particular site has monkeypatched appendChild, as you can see if you run
document.body.appendChild.toString()
into the console: it gives you
function(n){return t(n,"AC")?u.apply(this,arguments):null}
in return instead of [native code], which means the native function has been overwritten.
Note that the patched prototype object is Element.prototype, but appendChild exists natively on Node.prototype, which remains unpatched:
Node.prototype.appendChild.toString()
// gives function appendChild() { [native code] }
You can .call the unpatched appendChild instead:
(function(doc) {
if (typeof jQuery == 'undefined') {
var script_jQuery = document.createElement('script');
script_jQuery.setAttribute('src', 'https://code.jquery.com/jquery-latest.min.js');
Node.prototype.appendChild.call(
document.body,
script_jQuery
);
console.log('jQuery included ^_^');
} else {
console.log('jQuery already included ...');
}
})(document)
and then it will be appended successfully. (typeof jQuery will then evaluate to function rather than undefined, and you can see that the correct URL is requested from the network tab)
If the site had patched it properly and made all references to Node.prototype.appendChild inaccessible, the only solution would be to run your own Javascript before the page's Javascript ran, which could be done using a userscript manager like Tampermonkey, #run-at document-start, and using instant script injection to save a reference to Node.prototype.appendChild before it gets overwritten.
How can I communicate from a JavaScript code of a webpage to the main code of the add-on?
For example, something like this: If some element is clicked, in the corresponding event handler of the page script, which is the syntax that can be used to send some message to the main code?
Specifically, something like this, where the frame now must be replaced by a generic webpage. Is it possible?
Edit: I have tried the suggested code, but how I had said, the application returns this error:
console.error: sherlock:
Message: ReferenceError: document is not defined
Stack:
A coding exception was thrown in a Promise resolution callback.
See https://developer.mozilla.org/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
Full message: ReferenceError: document is not defined
Previously my question, I had infact tried something similar without any effect.
Yes it is possible.
document.onload = function() {
var elementYouWant = document.getElementById("someID");
elementYouWant.onclick = console.log("Yup.. It was clicked..");
};
Reference.
The answer to the question is not as trivial as it may seem at first sight. I had also thought of a logic of the type described in the Pogrindis' response.
But here, in the case of interaction between the main script (i.e. that of the add-on) and generic script of arbitrary documents, the pattern is different.
In summary, the interaction takes place in this way:
It is required the API page-mod.
Through the property includes of the object PageMod you create a reference to the document, specifying the URI (wildcards are allowed).
Via the contentScriptFile property it is set the URL of the .js file that will act as a vehicle between the main code and that of the document.
Here's an example that refers to the specific needs of the context in which I am. We have:
an add-on code (the main code);
a Sidebar type html document (gui1.html) loaded in the file that I
use as a simple UI (I advise against the use of Frames, since it does
not support many typical HTML features - eg the click on a link,
etc.) containing a link to a second document (gui2.html) which will then
be loaded into the browser tab (I needed this trick because the
Sidebar does not support localStorage, while it is necessary for me);
a script in the document.
We must create an exchange of information between the two elements. In my case the exchange is unidirectional, from the page script to the main one.
Here's the code (main.js):
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "resource://path/to/document/gui2.html",
contentScriptFile: data.url("listen.js"),
onAttach: function(worker) {
worker.port.on("gotElement", function(elementContent) {
console.log(elementContent);
});
}
});
and in the html page script:
<script type="text/javascript">
[...]
SOWIN = (navigator.userAgent.toLowerCase().indexOf("win") > -1) ? "win" : "nix";
if (SOWIN == "win") {
window.postMessage("win","*");
} else {
window.postMessage("Linux","*");
}
[...]
</script>
Finally in the JS file (listen.js) to be attached to the page script:
window.addEventListener('message', function(event) {
self.port.emit("gotElement", event.data);
}, false);
This is just a small example, but logic I would say that it is clear. The uploaded content scripts are not accessible directly from main.js (i.e. the add-on), but you can create a bidirectional communication through the exchange of messages. To achieve this we have to put ourselves in listening the event Attach of the page-mod. Then, it is passed a worker object to the listener; that worker may be used by the add-on for the exchange of messages.
Here are the references to have an exhaustive picture:
Interacting with page scripts
Communicating with other scripts
page-mod
port
Communicating using "port"
postMessage
Communicating using postMessage
I have a PhantomJS (1.9) script "test.js" (Code taken from PhantomJS docs)-
var webPage = require('webpage');
var page = webPage.create();
page.open('http://m.bing.com', function(status) {
var title = page.evaluate(function() {
// >> I have a breakpoint here, but debugger doesnt stop!
return document.title;
});
console.log(title);
phantom.exit();
});
I am debugging this code with phantomjs --remote-debugger-port=9000 test.js and chrome.
I can reach to all code breakpoints except the code inside page.evaluate().
Is there a way to debug it?
This is and old question and the phantomJS engine has been legacy for quite some time now, but for all those who has to maintain legacy code just like me, here is a gif I've prepared that shows step by step process of how to debug phantomjs scripts and the page opened inside.
So what you need to do is put a breakpoint in the page script and copy the link of the current browser tab and increase the page number by one. this will attach the debuggger to the inside script and you will be able to debug your code.
you can check out the step by step gif(it was too big to uplo) =>https://gaziedutr-my.sharepoint.com/:i:/g/personal/ahmet_bekir_urun_gazi_edu_tr/EZUj5yMbgqJIpun7qBdfF5sB3QWWg1r5u3MwayiKsw4Lug?e=PXeS8t
Suppose there is a web site has a global namespace Q = {}, and there is a function under it: Q.foo
I'd like to overwrite this function in my chrome extension, so when the web page calls Q.foo, it would do what I like.
I tried to write:
Q.foo = function(){
alert("over written");
}
with content script. But it doesn't work....
thanks.
The main problem iis that a chrome extension exists in a separated enviornment which was created so that extension developers cant screw with the existing page's javascript and vice versa.
However geeky people can do this:
document.head.innerHTML += '<script>Q.foo = function(){alert("over written");}</script>';
Basically what this does is that it appends a script tag into the dom which is then instantly eval'd in the context of the page.
Q.prototype.foo = function(){
alert("over written");
}
I need to run a script on an external page.
I'm trying to consume the Dropbox API (JavaScript and HTML only).
I'm using JsOAuth to work with OAuth.
Code
This application is a pair of type Packaged Apps to Google Chrome.
Authorise
//Request token
chrome.windows.create({url: url, type:"popup"}, function(win){
chrome.tabs.executeScript(win.id, { file: "contentScript.js" }, function(){
console.log("Callback executeScript!!");
});
});
url = Request token url
contentScript.js
$(document).ready(function() {
console.log("Script injected!!!");
})
Error in console
Error during tabs.executeScript: Unknown error.
chromeHidden.handleResponseextensions/schema_generated_bindings.js:94
openAuthoriseWindowscripts.js:297
g.fetchRequestTokenjsOAuth-1.3.3.min.js:1
g.init.request.q.onreadystatechange
Attempts
As the external page can not jQuery, an effort was to remove the reference to jQuery
contentScript.js
console.log("Script injected!!!");
Error in console
Error during tabs.executeScript: Unknown error.
chromeHidden.handleResponse
Another attempt was to inject the script via code:
//Request token
chrome.windows.create({url: url, type:"popup"}, function(win){
chrome.tabs.executeScript(win.id, { code: "console.log('Script injected!!')" }, function(){
console.log("Callback executeScript!!");
});
});
But the error was the same as above
I'm not sure whether you are wanting to inject the script into the tab opening the window, or the new tab you just opened. In any event, I made an effort to answer both questions below. First, please note that you should not attempt to load the script into the window object. The window can contain multiple tabs, and each tab has their own scripting environment. Inject your script into a tab of the newly opened window.
Outcome 1: Injecting the Script into the tab you Just Opened
The code below should load the script into all of the tabs of a window since win.tabs gives an array of tabs. For a newly opened window, there is usually only one tab.
chrome.windows.create({url: "https://google.com", type:"popup"}, function(win){
chrome.tabs.executeScript(win.id.tabs,
{ code: "console.log('new tab context');" });
});
Outcome 2: Injecting the Script into the tab opening the window
Record the id of the tab opening the new window, then inject the script on the callback
var openingTabId = ASSIGN_THE_TAB_ID;
chrome.windows.create({url: "https://google.com", type:"popup"}, function(win){
chrome.tabs.executeScript(openingTabId,
{ code: "console.log('opening tab context');" });
});
Notice that I used the code object to pass code without using a script file.