I have an array of data that I want to show to the user of the extension. I thought of manipulating the background page and populating it with data then showing it to the user via: chrome.tabs.create({url: chrome.extension.getURL('background.html')}
However, this opens a brand new background.html page that is not manipulated and, further more, within a totally different context than the original background.html...
i.e I don't have access in that new page to my array that I want to show to the user.
I also tried with a different page than background.html -> results.html...I get its url then send it a message with the array that I want to show to the user:
chrome.tabs.create({url: chrome.extension.getURL('results.html')},function(tab){
chrome.tabs.sendMessage(tab.id,{'personsarray':persons});
});
Then in results.js:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(request);
//other operations
});
but it seems the message is not being sent! can't find anything in the console!
Questions:
Is it possible to show data to user using the background.html page?
What are the appropriate ways to show data to the user in chrome extensions?
Why am I not receiving the message sent from background.js to results.js?
Background pages have unrestricted access to each other. When you created the results.html the next appropriate step would have been to call chrome.runtime.getBackgroundPage() from results.html 's javascript page to get the background page window object. That object will contain all of the data and objects in background.html.
Related
I am currently trying to build an application using Google App Maker. After a user hits a "Create" button, depending on whether the files were successfully or unsuccessfully sent, a popup snackbar should display saying "File successfully sent" or "Something went wrong. File not sent." I want to indicate to the user in the final deployed application (no bottom console log) whether their files were sent or not. I do not know how to do this. I have tried creating separate pre-created snackbars (one for success, one for failure) and having the clientscript function display either one depending on what is returned from the serverscript function. However, I do not know how to show them. How do you display a snackbar popup in a clientscript function? Thank you for your help!
Please follow below steps in order to display Snackbar page.
Create a Snackbar page in your appmaker. In order to click on Left Hand Side panel '+' button on the "Page" section.
Choose Pop up. Click "Next" button. On the Next page Select "Snackbar" and click on "Create".
This will create a snack bar page for you. Open the snack bar page. On the bottom part you can see a text box which will display your custom message. Bind a Function to it. Show cased below.
Now in the client script add the following code to configure Snackbar.
This will create a Reusable Snack bar for you for all different messages.
//Client Script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Whenever any event happens add the following code to Display Snackbar.
setNotificationText('Congratulations!!! You have successfully showcased SnackBar');
app.popups.Snackbar.visible = true; //Snackbar is page name.
Here configuring Snackbar code is optional, just to reuse one page for many messages. You can directly showcase the Snackbar page by adding app.popups.Snackbar.visible = true; code in your client script.
I am trying to include a feature in my app that examines the values of a column in a user-uploaded Google sheet and verifies whether they are correct or not. If there are any incorrect values, a popup like Snackbar or Notification dialog will appear listing the incorrect values. If there are no incorrect values, no popup will appear. How do you display a popup with different values depending on the situation? Is there a way to display unique popups directly from the ServerScript without having to create separate pages? Thank you very much!
You can do it either by direct interaction with Snackbar's children widgets or by binding them to Custom Properties:
// option 1
app.popups.Snackbar.descendants.SnackbarText.text = message;
// option 2
app.popups.Snackbar.properties.Text = message;
app.popups.Snackbar.visible = true;
You can see first option implementation sample here - https://developers.google.com/appmaker/samples/jdbc/
You can create one Snackbar page. In that Page you should have Textbox at the bottom. You can bind that Textbox's value to custom function like getNotificationText();
In the client script right the following code in the common script.
//Client script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Once you do this, you can write following lines from your different methods to display message.
//Client script
setNotificationText('Your message.');
app.popups.Snackbar.visible = true;
I need to transfer data from one website form to another using chrome extension.
I have the basic files:
manifest.json
popup.html
content.js
background.js
I can get the data using content.js:
let title = document.getElementById("title").value;
chrome.runtime.sendMessage(
{
title: title,
}
)
How can I send it to the other tab?
Edit
In my background.js:
chrome.runtime.onMessageExternal.addListener (
function (request, sender, sendResponse) {
alert(request.title)
});
Whenever you need to transfer something between two entities, you need a common medium. Be it sound (Air) or words(Language).
In this case, you need to transfer data from one website to another. Possible common mediums are :-
Server
Chrome Extension (via background)
In case of server, you need to ensure that
1. Message from user1 does not reach to user2
2. Message from site1 should be delivered to correct recipient site
In case of chrome extension you just need to ensure #2 So definitely going with chrome extension background process is a better approach.
Workflow
Site_1_Content_Script ---> Background --- > Site_2_Content_Script
Solution with pseudocode
From Site 1, Send Message to background with message and recipient details
chrome.runtime.sendMessage({
message: message.,
source: source_domain,
destination: destination_domain
}, function(resp) { });
Receive message in background and send it to to other tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResp) {
chrome.tabs.query({ url: request.destination_domain }, function(tabs) {
// Send message to each tab matching that domain/url
}
Receive message un content script
It's not possible to send it from one content script (tab) to other.
You need to do it through your background page script.
It will be like this:
send a message from CS to BG page -> process message on BG page and
send it to another tab
You can find documentation on messaging here.
I Want it That One page is only shown once the application starts and the next time go to the Home screen.I'm trying to look into NavigationHelper but doesn't work!
Check in your App.xaml.cs file, you should have something looking like this code in the OnLaunched method:
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
Here, you can check whether the app is launched for the first time (for instance, by storing a value on the phone), and replace the call to rootFrame.Navigate(typeof(MainPage), args.Arguments)) by the page you want to navigate to.
I want a html-form to
open a new window (which contains 2 frames)
send the data of the form to one of these frames as a request
Is this possible? Currently, the form just opens a new window with and sends the request to the URL of the page that processes it. But what I want is that the new window that opens has two frames, one of which processes the form data.
I hope you understand my question and thank you for an answer.
Option A
you will need to use AJAX and make those steps:
Open new window
Send request by using AJAX
Get response
Put response to DIV in new window
Option B
you will need to create special html file that will be default page one of frame. next you will need to copy whole form with values of inputs to this file and trigger the submit. this way is without AJAX but it's more hmm.... twisted?
tell which option you prefere and then i can help you with code if you want of course
You can open and access new window by:
newWin = null;
newWin = open("page.html", 'win1')
if(newWin&&newWin.open&&!newWin.closed){
newDiv=newWin.document.createElement("DIV")
newWin.document.body.appendChild(newDiv)
newWin.focus()
} else {
alert("The window is not open")
}