I've been able to send data from the background page to the content script. but this is done using sendrequest(). I will need to send data back and forth so I'm trying to figure out the correct syntax for using the port.postmessage from background page to content script. I have already read, several times, the google page on Messaging and I don't seem to get it. I even copied the code directly from the page and tested with no result. All I'm trying to do for now is send data from background page to content script using connect as opposed to sendrequest. The response from the content script I will deal with later as code with this response has been the main thorn. I just want to understand the process one step at a time without the extra knowledge of sending a response back.
I'm not sure if this contravenes the rules of this board but can someone PLEASE give me an example of some code to do this (background page and content script excerpt, the background page is the sender).
I've asked for assistance several times on this site only to be told to read the documentation or check out sites I've already visited.
If you just want any example of opening a port from the extension to a content script, here's the simplest I can think of. The background just opens a port and sends "Hello tab!" over the port, and the content script sends a message to the background any time you click on the webpage.
I think this is pretty simple, so I don't know why you are so stressed. Just make sure that the content tab is already listening when the background tries to connect (I do this by waiting until the "complete" event).
manifest.json:
{
"name": "TestExt",
"version": "0.1",
"background_page": "background.html",
"content_scripts": [{
"matches": ["http://localhost/*"], // same as background.html regexp
"js": ["injected.js"]
}],
"permissions": [
"tabs" // ability to inject js and listen to onUpdated
]
}
background.html:
<script>
var interestingTabs = {};
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
// same as manifest.json wildcard
if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) {
interestingTabs[tabId] = true;
}
if (changeInfo.status === 'complete' && interestingTabs[tabId]) {
delete interestingTabs[tabId];
console.log('Trying to connect to tab ' + tabId);
var port = chrome.tabs.connect(tabId);
port.onMessage.addListener(function(m) {
console.log('received message from tab ' + tabId + ':');
console.log(m);
});
port.postMessage('Hello tab!');
}
});
</script>
injection.js:
chrome.extension.onConnect.addListener(function(port) {
console.log('Connected to content script!');
port.onMessage.addListener(function(m) {
console.log('Received message:');
console.log(m);
});
document.documentElement.addEventListener('click', function(e) {
port.postMessage('User clicked on a ' + e.target.tagName);
}, true);
});
Detailed documentation and easy (the most basic) examples shown in the documentation page.
Plus, a quick search in stackoverflow will allow you to see many similar questions with detailed answers.
Related
I'm trying to upload a jpeg image from local files to a webpage developed here in my job. The thing is, we need to click on the page to open the file explorer and then select the image (or drag and drop into the same spot that may be clicked).
Here is a picture from the web page
I don't know how could i do that, i was trying some code that i've seen in "https://medium.com/#chrisbautistaaa/adding-image-fixtures-in-cypress-a88787daac9c". But don't worked. I actually don't know how it works exactly, could anyone help me?
Here is my code
After #brendan's help, I was able to solve the problem by finding an input that was "hidden" under an element. However, before that I tried drag-n-drop, and cypress returned me an error (despite the successful upload). The context was, immediately after the upload, the element re-renders and cypress told me that:
.
Beside the success with input element, i was wondering how it would be possible to resolve this error, is it possible to do something internally to cypress to ignore or wait until the element re-renders back to normal?
Solutions suggested by cypress:
We're doing this using cypress-file-upload
Here's an example from our code:
cy.fixture(fileName).then(fileContent => {
cy.get(selectors.dropZoneInput).upload(
{ fileContent, fileName, mimeType: "application/pdf" },
{ subjectType: "drag-n-drop" }
);
});
For your purpose, I think this will work:
cy.fixture(imagePath).then(fileContent => {
cy.get(".upload-box").first().upload(
{ fileContent, fileName, mimeType: "image/jpeg" },
{ subjectType: "drag-n-drop" }
);
});
I have FB.ui working well, I can share whatever info I need to share. However the issue is that it's being rolled into a Web App (This "add to home screen") for an ipad. Whenever the dialog opens, it's opened full screen, and once it's shared there is no way to close the opened dialog.
<input type="button" onclick="share_prompt()" value="Share" />
function share_prompt()
{
FB.ui(
{
method: 'feed',
display: "iframe",
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.',
message: 'Facebook Dialogs are easy!'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
}
I've changed the "display" property to everything possible, but the docs say that it defaults to a "touch" display in web apps.
Also, to make it even more frustrating, the response doesn't fire when in web app mode. Only in the browser window.
Any ideas?
This is the way I solved this:
if(navigator.standalone){
new_url = 'https://www.facebook.com/dialog/feed?'+
'app_id=XXXXXXXXXXXXX'+
'&display=popup'+
'&caption='+fbName+
'&picture='+fbPicture+
'&description='+fbDescription+
'&link='+fbLink+
'&redirect_uri=http://myurl.com/mycontroller/#post_id';
window.open(new_url,'_self');
} else {
//do the normal way
}
This way you can have a redirect url and you can send the post id back to your app if you need it. Hope this answers your question if you still didn't find a way to solve it.
I'm trying to automate an application that uses form security in order to upload a file and then scrape data from the returned HTML.
I started out using the solution from this question. I can define my steps and get through the entire workflow as long as the last step is rendering the page.
Here are the two steps that are the meat of my script:
function() {
page.open("https://remotesite.com/do/something", function(status) {
if ('success' === status) {
page.uploadFile('input[name=file]', 'x.csv');
page.evaluate(function() {
// assignButton is used to associate modules with an account
document.getElementById("assignButton").click();
});
}
});
},
function() {
page.render('upload-results.png');
page.evaluate(function() {
var results = document.getElementById("moduleProcessingReport");
console.log("results: " + results);
});
},
When I run the script, I see that the output render is correct. However, the evaluate part isn't working. I can confirm that my DOM selection is correct by running it in the Javascript console while on the remote site.
I have seen other questions, but they revolve around using setTimeout. Unfortunately, the step strategy from the original approach already has a timeout.
UPDATE
I tried a slightly different approach, using this post and got similar results. I believe that document uses an older PhantomJS API, so I used the 'onLoadFinished' event to drive between steps.
i recomend you use casperjs or if you use PJS's webPage.injectScript() you could load up jquery and then your own script to do form input/navigation.
I have an ExtJS4 site www.mysite.com where I serve index.html when a user enter the site. I want the user to be able to access the site with some param data redirected from another site. For example, www.mysite.com?q=10
How do I capture q=10 which I will use to retrieve some data from the database?
How do I send index.html so that browser retrieves javascript and css files. Once all the javascript and css files are loaded, I need to render a page displaying the result from the database?
Thanks
To get the url parameters I've done this :
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
console.log(params.q) // you should see 10 being printed
If index.html is gonna come with some param in the url you can use the launch method to do an ajax request and bassed on that response render something
Ext.application({
name : 'MyAppWithDynamicFirstPage',
launch : function() {
var getParams = document.URL.split("?");
var params = Ext.urlDecode(getParams[getParams.length - 1]);
var q = params.q;
Ext.Ajax.request({
url: 'someServlet/getViewToRender',
params: {
'q': q
},
success: function(response, opts) {
//bassed on this you would do something else like render some specific panel on your viewport
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
}
});
I hope this was of some help.
Best regards.
Depends of your web server, programming language and architecture
Usually first ExtJs is loading with all js/css. After it loaded, data loads asynchronously from the server. But if you exactly know what are you doing, you can render your data into a global variable inside a script tag and then use it in the code.
While building my first mobile app using sencha touch 2 some questions got in my way and I can't seem to find their answer.
Where should an app configuration be stored (theme, language, font size ). I was thinking
to count the data from a store and if bigger than 0 work on that data otherwise add data( this would happen only the first time application is opened or localstorage cleared..). There are other options for this kind of thing(things like an array which will be changed when user is interacting with the app) ?
I need to use in my application around 100 images. I don't know what options I have here to embed the images into app. Saw lots of examples loading image from external server but not sure if there is an option for packing them with the app.
If I had an array with a name(key) and the image url(value), where should this array be ? in a json file and use an ajax load each time a need a name in there ?
Thanks.
Let me suggest few options:
1- App configuration : If app configuration is like set of constant values which won't change by user interaction you can create a file (e.g. properties.js) and load it on application load.
Properties = {
SERVICE_URL : 'http://mycompany.com/api',
PAGE_SIZE : 20
}
and to load it you just have to edit app.json
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "resources/data/properties.js"
}
]
If you want to control these values then you can keep it on your server and give its URL as "path" in app.json
2- There is always option of packaging images with your app, just like all the icon & startup images are packaged but its not suggested because it increases size of your deployable and people with slow internet connections and low end devices might skip installing it if size it too large.
3- No need to load the JSON file every time you need it, you can cache the data in global variable after first load and keep referring to the array whenever required. Now where to define global variable is another interesting discussion with people suggesting lot of things but I prefer to have a singleton class which can keep all the global functions & variables. See this thread to understand how : Where do I put my global helper functions if they are needed before Ext.application() is being executed?
For Text we can Try like this
var A_address=Ext.getCmp('address').getValue(); //get the value
localStorage.setItem("Adult1_select1",A_select1); // assign localstore
var web_arrayTotalPAssengers=[];
web_arrayTotalPAssengers.push(localStorage.getItem("web_TotalPassengers"));
console.log(web_arrayTotalPAssengers);
// push the values in array...
Ext.Ajax.request({
url:'http:/...........',
method:'POST',
disableCaching: false,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
jsonData: {
origin:Ext.decode(web_arrayTotalPAssengers), //decode and send
}
success:function(response)
{
console.log(response);
console.log("Success");
},
failure : function(response)
{
console.log("Failed");
}