How to hide popup.html in chrome extension - google-chrome-extension
Here is my setup and i am trying to figure out if its possible.
I have an Chrome Extension which goes and parses some data from a active page and then copys the result to the clipboard. My popup.html is minimal and looks like this
<!DOCTYPE html>
<html style=''>
<head>
<script src='popup.js'></script>
</head>
<body style="width:600px;">
<textarea id="emailphone" cols="50" rows="10"></textarea>
<br>
<button id="copy-to-clipboard">Copy to Clipboard</button>
</body>
</html>
What i would like to do is actually not even show the popup at all as my script goes and creates an Alert and displays the data. But for one my script sets the Inner Html of the emailphone textarea with the parsed data and then i go and copy the textarea to my clipboard. Here is my popup script
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
emailphone.innerText = request.source;
myFunction();
}
});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("copy-to-clipboard").addEventListener("click", copytoclipboard);
});
function onWindowLoad() {
var message = document.querySelector('#emailphone');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.runtime.lastError) {
emailphone.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
}
function copytoclipboard() {
var copyText = document.getElementById("emailphone");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert(copyText.value);
}
window.onload = onWindowLoad;
when i use window.close() it only closes after i close the alert. So what i am looking for is to only show the Alert and not the popup.html
Related
Chrome Extension Manifest V3 permission for Javascript [duplicate]
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
Chrome Extension Error: Refused to execute inline event handler [duplicate]
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
Bokeh is not generating plot and is instead returning an HTML file
I am new to Python and was trying out the Bokeh library. I try to plot a basic line graph and instead of returning the graph I get an ouput HTML file. When I ran the HTML code it looks like the graph does generate. Does anyone have any idea why the show() method is not showing me the chart as expected. I tried this in both Jupyter Notebook as well as Atom and both return the HTML code. I am running Windows 7 as well.
My code:
from bokeh.plotting import figure
from bokeh.io import output_file , show
x=[1,2,3,4,5]
y=[6,7,8,9,10]
output_file("test1.html")
f=figure()
f.line(x,y)
show(f)
Returned HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Plot</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div class="bk-root" id="d48bbd43-55c8-4727-befa-468754bdb0b5"></div>
<script type="application/json" id="41bd10a1-5a61-4504-80f1-8c56f40e644b">
{"c99a857f-320f-48ba-8576-3ef2bd47c6ce":{"roots":{"references":[{"attributes":{},"id":"c17f31c6-ea53-4bda-b425-65e087f9b126","type":"SaveTool"},{"attributes":{},"id":"d5662033-1332-448f-8078-b1b5fc6ebedd","type":"ResetTool"},{"attributes":{"overlay":{"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"}},"id":"2ebb0a9b-1f3e-4e0e-b54c-dab483d9ad1d","type":"BoxZoomTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"eea39d89-6da1-4401-a6bb-41d0ad5fd1a9","type":"PanTool"},{"id":"dbdcf43e-f6cd-4999-8664-7d4bbeb28b1b","type":"WheelZoomTool"},{"id":"5e93a11e-972b-4ea4-9ebd-e030a0a92bf5","type":"BoxZoomTool"},{"id":"7b78cfe2-aa29-4245-98c3-b8678943be2c","type":"SaveTool"},{"id":"d5662033-1332-448f-8078-b1b5fc6ebedd","type":"ResetTool"},{"id":"3bcc793e-9b7f-42f7-b939-437b29982b6f","type":"HelpTool"}]},"id":"e29112ae-02d0-4dc6-9788-c3bcd084c560","type":"Toolbar"},{"attributes":{},"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"},{"attributes":{"data_source":{"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"},"glyph":{"id":"5c2d97f3-520b-4a40-b4a2-41bde9d2dbc6","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"762d72ea-6726-4767-aed8-9a5abfbd3abf","type":"Line"},"selection_glyph":null,"view":{"id":"d9fbc277-e9f7-409c-a9b7-8362fed1fe82","type":"CDSView"}},"id":"d495f273-35fd-4f1d-a7c7-44cdc6e2043b","type":"GlyphRenderer"},{"attributes":{},"id":"fdf26c70-7fce-4158-800f-62ef31b890ac","type":"ResetTool"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"},{"attributes":{},"id":"f2bb603d-d041-46dc-9149-5d20c78da06e","type":"PanTool"},{"attributes":{"callback":null,"data":{"x":[1,2,3,4,5],"y":[6,7,8,9,10]},"selected":{"id":"7453ce84-2208-4e58-9d06-ddd3ca1708f6","type":"Selection"},"selection_policy":{"id":"601e5c38-1a36-447b-83d5-64411a4833e8","type":"UnionRenderers"}},"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"},{"attributes":{},"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"f2bb603d-d041-46dc-9149-5d20c78da06e","type":"PanTool"},{"id":"ad0a537b-c0d3-4808-846f-be215dbd4631","type":"WheelZoomTool"},{"id":"2ebb0a9b-1f3e-4e0e-b54c-dab483d9ad1d","type":"BoxZoomTool"},{"id":"c17f31c6-ea53-4bda-b425-65e087f9b126","type":"SaveTool"},{"id":"fdf26c70-7fce-4158-800f-62ef31b890ac","type":"ResetTool"},{"id":"949b3238-ac22-4ad2-b652-af77d2e455ad","type":"HelpTool"}]},"id":"096653f5-de71-4386-8bb7-0712ad1765ca","type":"Toolbar"},{"attributes":{},"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"},{"attributes":{"formatter":{"id":"83cded7e-dad6-4fc7-b0f2-761cc4012436","type":"BasicTickFormatter"},"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"}},"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"},{"attributes":{"data_source":{"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"},"glyph":{"id":"58e9f325-f8d1-44cb-9e83-f757a0bd329a","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"b6c181de-6d18-433b-8bbd-b14169b56eb5","type":"Line"},"selection_glyph":null,"view":{"id":"64bb6a0d-f877-4657-9ade-525ec88605a9","type":"CDSView"}},"id":"f17257ba-4f75-42c7-893b-a4cf0036740b","type":"GlyphRenderer"},{"attributes":{"dimension":1,"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"7c17ff42-bbc4-4e59-a0b3-eebe55024f05","type":"BasicTicker"}},"id":"448ae753-190a-47b3-b48c-48d42ad5c905","type":"Grid"},{"attributes":{"callback":null},"id":"320a3e54-e61a-45c3-b12e-64c5570e1c82","type":"DataRange1d"},{"attributes":{"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"}},"id":"408bec16-a4cc-48b8-a8e8-9753f9815ed4","type":"Grid"},{"attributes":{},"id":"86e986bf-1069-41b3-b75c-db7e68d1b161","type":"LinearScale"},{"attributes":{},"id":"9e7303e6-a33a-4cfd-8a41-23f8c9b4fe8f","type":"LinearScale"},{"attributes":{},"id":"4d5fd9c6-8637-4d02-b775-2411c95a5d06","type":"LinearScale"},{"attributes":{"formatter":{"id":"f2264866-9fec-45b0-b242-5111fcc1c4fb","type":"BasicTickFormatter"},"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"}},"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"},{"attributes":{},"id":"3bcc793e-9b7f-42f7-b939-437b29982b6f","type":"HelpTool"},{"attributes":{"dimension":1,"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"}},"id":"f496d5a9-0ee6-460b-9016-3fa5c19a56a7","type":"Grid"},{"attributes":{},"id":"1b240c0f-07b2-4113-a8a8-a4efc1583fdd","type":"BasicTickFormatter"},{"attributes":{},"id":"69a59dc3-f814-4f87-a39d-e79d8e0c624c","type":"BasicTicker"},{"attributes":{"source":{"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"}},"id":"d9fbc277-e9f7-409c-a9b7-8362fed1fe82","type":"CDSView"},{"attributes":{"callback":null},"id":"98a9bfe3-e787-4432-af9d-0f3f9f086166","type":"DataRange1d"},{"attributes":{},"id":"7453ce84-2208-4e58-9d06-ddd3ca1708f6","type":"Selection"},{"attributes":{"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"}},"id":"937c1124-b157-4eca-a0b3-75f6ef2dda90","type":"Grid"},{"attributes":{"callback":null},"id":"95e74f2e-df09-4945-a76e-c185eea3d4df","type":"DataRange1d"},{"attributes":{"formatter":{"id":"2030a3a4-7747-427a-a1dd-ffc3901ee9be","type":"BasicTickFormatter"},"plot":{"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},"ticker":{"id":"ee7e7d93-1a3d-4273-ad05-0dae9c2e2608","type":"BasicTicker"}},"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"},{"attributes":{"source":{"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"}},"id":"58980905-7efb-4a11-8de9-9b10e9b1d1c8","type":"CDSView"},{"attributes":{"callback":null,"data":{"x":[3,7.5,10],"y":[3,6,9]},"selected":{"id":"668b3eb0-b6de-4fc7-ae7b-d1a7ce923009","type":"Selection"},"selection_policy":{"id":"4dc9ce99-d94b-4fbd-9ed2-ef8bb292be8b","type":"UnionRenderers"}},"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"762d72ea-6726-4767-aed8-9a5abfbd3abf","type":"Line"},{"attributes":{},"id":"5ec88388-4913-436f-b8a6-cfd6d391154c","type":"BasicTickFormatter"},{"attributes":{},"id":"eea39d89-6da1-4401-a6bb-41d0ad5fd1a9","type":"PanTool"},{"attributes":{"callback":null},"id":"d9d21cdf-f19b-4f95-98ba-ef43d9aec5a7","type":"DataRange1d"},{"attributes":{},"id":"ad0a537b-c0d3-4808-846f-be215dbd4631","type":"WheelZoomTool"},{"attributes":{"formatter":{"id":"1b240c0f-07b2-4113-a8a8-a4efc1583fdd","type":"BasicTickFormatter"},"plot":{"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},"ticker":{"id":"18ee1741-c202-4f4b-b52e-c2cc490b8f6f","type":"BasicTicker"}},"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"},{"attributes":{},"id":"2030a3a4-7747-427a-a1dd-ffc3901ee9be","type":"BasicTickFormatter"},{"attributes":{},"id":"541dc82f-bd18-4993-adff-060c1167d6ab","type":"Selection"},{"attributes":{},"id":"4dc9ce99-d94b-4fbd-9ed2-ef8bb292be8b","type":"UnionRenderers"},{"attributes":{},"id":"83cded7e-dad6-4fc7-b0f2-761cc4012436","type":"BasicTickFormatter"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"},{"attributes":{},"id":"949b3238-ac22-4ad2-b652-af77d2e455ad","type":"HelpTool"},{"attributes":{"formatter":{"id":"5ec88388-4913-436f-b8a6-cfd6d391154c","type":"BasicTickFormatter"},"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"}},"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"},{"attributes":{"callback":null},"id":"0eb66654-fd86-43a2-8b94-2f345c420dec","type":"DataRange1d"},{"attributes":{},"id":"dbdcf43e-f6cd-4999-8664-7d4bbeb28b1b","type":"WheelZoomTool"},{"attributes":{"callback":null},"id":"66ecc1d0-d899-41cd-b791-13176cd24a81","type":"DataRange1d"},{"attributes":{},"id":"26a46564-9ff5-4fdb-987a-a2119540680b","type":"LinearScale"},{"attributes":{"formatter":{"id":"e87b8867-6df4-4f58-a378-25f653b25bf6","type":"BasicTickFormatter"},"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"}},"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"},{"attributes":{"below":[{"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"}],"left":[{"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"}],"renderers":[{"id":"90583a87-4ad1-402c-aa3c-1a3c661e7406","type":"LinearAxis"},{"id":"408bec16-a4cc-48b8-a8e8-9753f9815ed4","type":"Grid"},{"id":"f5b7139e-5848-412b-9e0b-9c60547d3a47","type":"LinearAxis"},{"id":"448ae753-190a-47b3-b48c-48d42ad5c905","type":"Grid"},{"id":"647df24a-7a53-48f7-850b-e99faaf7e12c","type":"BoxAnnotation"},{"id":"d495f273-35fd-4f1d-a7c7-44cdc6e2043b","type":"GlyphRenderer"}],"title":{"id":"d4c3a0d9-1a75-4bf7-a107-1d30bf785c76","type":"Title"},"toolbar":{"id":"096653f5-de71-4386-8bb7-0712ad1765ca","type":"Toolbar"},"x_range":{"id":"95e74f2e-df09-4945-a76e-c185eea3d4df","type":"DataRange1d"},"x_scale":{"id":"c561783a-f07e-44c4-8bce-04e3a3363ae6","type":"LinearScale"},"y_range":{"id":"0eb66654-fd86-43a2-8b94-2f345c420dec","type":"DataRange1d"},"y_scale":{"id":"4d5fd9c6-8637-4d02-b775-2411c95a5d06","type":"LinearScale"}},"id":"4da3e749-cdb4-48ed-8dc6-b78818d8f587","subtype":"Figure","type":"Plot"},{"attributes":{},"id":"f95a9d96-e1ac-4ce5-bc22-36cf2f38f282","type":"LinearScale"},{"attributes":{"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"5c2d97f3-520b-4a40-b4a2-41bde9d2dbc6","type":"Line"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"568ebe47-1b17-4fc7-8859-72a1e4b19c03","type":"PanTool"},{"id":"e1d4052b-2921-4d77-ad94-6918560aa1ba","type":"WheelZoomTool"},{"id":"0854e626-a869-4df9-8767-e630ecd58a96","type":"BoxZoomTool"},{"id":"110fc368-ca75-4219-8f15-890fcdb2f36b","type":"SaveTool"},{"id":"885ac673-f730-49e8-813f-64fd64eaf473","type":"ResetTool"},{"id":"f80496c0-9c80-4a80-8f2f-da85474351ca","type":"HelpTool"}]},"id":"f941560f-8e6b-451c-9eb8-adefc4eb40ab","type":"Toolbar"},{"attributes":{"below":[{"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"}],"left":[{"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"}],"renderers":[{"id":"f1e22f73-d0fc-46b4-a3b4-b264cf417d4a","type":"LinearAxis"},{"id":"76ad232d-7081-49f8-aed9-647e4230aca4","type":"Grid"},{"id":"474d496d-aa15-4fe3-b163-0a629270845f","type":"LinearAxis"},{"id":"c3bc6c16-6356-43da-9153-d0f6463dc876","type":"Grid"},{"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"},{"id":"e8a9236a-3159-4555-ab32-5a71f98315fe","type":"GlyphRenderer"}],"title":{"id":"398834ce-a8d9-46e0-923e-ab71eb6e8aa8","type":"Title"},"toolbar":{"id":"f941560f-8e6b-451c-9eb8-adefc4eb40ab","type":"Toolbar"},"x_range":{"id":"320a3e54-e61a-45c3-b12e-64c5570e1c82","type":"DataRange1d"},"x_scale":{"id":"26a46564-9ff5-4fdb-987a-a2119540680b","type":"LinearScale"},"y_range":{"id":"66ecc1d0-d899-41cd-b791-13176cd24a81","type":"DataRange1d"},"y_scale":{"id":"f95a9d96-e1ac-4ce5-bc22-36cf2f38f282","type":"LinearScale"}},"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},{"attributes":{"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"}},"id":"76ad232d-7081-49f8-aed9-647e4230aca4","type":"Grid"},{"attributes":{},"id":"164ee759-2971-4dd9-ac18-35cdb02fca0e","type":"BasicTicker"},{"attributes":{"callback":null,"data":{"x":[1,2,3,4,5],"y":[6,7,8,9,10]},"selected":{"id":"541dc82f-bd18-4993-adff-060c1167d6ab","type":"Selection"},"selection_policy":{"id":"ad391a37-ff57-4e0e-a32f-1fc91db098fc","type":"UnionRenderers"}},"id":"7fedd7ce-eb1b-4533-8e35-492e9f4f6723","type":"ColumnDataSource"},{"attributes":{"dimension":1,"plot":{"id":"635f8152-f2d6-4568-ae68-2973f310eaf8","subtype":"Figure","type":"Plot"},"ticker":{"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"}},"id":"c3bc6c16-6356-43da-9153-d0f6463dc876","type":"Grid"},{"attributes":{},"id":"cfd25d7d-feea-4647-911d-6a5605dc3d71","type":"BasicTicker"},{"attributes":{},"id":"c561783a-f07e-44c4-8bce-04e3a3363ae6","type":"LinearScale"},{"attributes":{},"id":"ad391a37-ff57-4e0e-a32f-1fc91db098fc","type":"UnionRenderers"},{"attributes":{"plot":null,"text":""},"id":"398834ce-a8d9-46e0-923e-ab71eb6e8aa8","type":"Title"},{"attributes":{},"id":"568ebe47-1b17-4fc7-8859-72a1e4b19c03","type":"PanTool"},{"attributes":{},"id":"e1d4052b-2921-4d77-ad94-6918560aa1ba","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"}},"id":"0854e626-a869-4df9-8767-e630ecd58a96","type":"BoxZoomTool"},{"attributes":{},"id":"110fc368-ca75-4219-8f15-890fcdb2f36b","type":"SaveTool"},{"attributes":{},"id":"885ac673-f730-49e8-813f-64fd64eaf473","type":"ResetTool"},{"attributes":{},"id":"f80496c0-9c80-4a80-8f2f-da85474351ca","type":"HelpTool"},{"attributes":{"bottom_units":"screen","fill_alpha":{"value":0.5},"fill_color":{"value":"lightgrey"},"left_units":"screen","level":"overlay","line_alpha":{"value":1.0},"line_color":{"value":"black"},"line_dash":[4,4],"line_width":{"value":2},"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"9f88dd88-dbad-4b5b-ae2d-b1d2d8c36a15","type":"BoxAnnotation"},{"attributes":{"fill_alpha":{"value":0.1},"fill_color":{"value":"#1f77b4"},"line_alpha":{"value":0.1},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"8f473bf9-6ee0-4c0f-b549-b2f0b00fa17f","type":"Triangle"},{"attributes":{"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"58e9f325-f8d1-44cb-9e83-f757a0bd329a","type":"Line"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"x"},"y":{"field":"y"}},"id":"b6c181de-6d18-433b-8bbd-b14169b56eb5","type":"Line"},{"attributes":{},"id":"668b3eb0-b6de-4fc7-ae7b-d1a7ce923009","type":"Selection"},{"attributes":{"plot":null,"text":""},"id":"d4c3a0d9-1a75-4bf7-a107-1d30bf785c76","type":"Title"},{"attributes":{},"id":"e87b8867-6df4-4f58-a378-25f653b25bf6","type":"BasicTickFormatter"},{"attributes":{},"id":"7b78cfe2-aa29-4245-98c3-b8678943be2c","type":"SaveTool"},{"attributes":{},"id":"601e5c38-1a36-447b-83d5-64411a4833e8","type":"UnionRenderers"},{"attributes":{"data_source":{"id":"7f04e4d5-b03b-4ebb-a89d-f65cbb91b729","type":"ColumnDataSource"},"glyph":{"id":"cda92757-3dcd-42cb-95b9-392e57684258","type":"Triangle"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"8f473bf9-6ee0-4c0f-b549-b2f0b00fa17f","type":"Triangle"},"selection_glyph":null,"view":{"id":"58980905-7efb-4a11-8de9-9b10e9b1d1c8","type":"CDSView"}},"id":"e8a9236a-3159-4555-ab32-5a71f98315fe","type":"GlyphRenderer"},{"attributes":{"below":[{"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"}],"left":[{"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"}],"renderers":[{"id":"8977dc31-58c8-4dda-95bc-70199558a319","type":"LinearAxis"},{"id":"937c1124-b157-4eca-a0b3-75f6ef2dda90","type":"Grid"},{"id":"264bb8f9-c4f8-4f19-959e-25e2f7c2a656","type":"LinearAxis"},{"id":"f496d5a9-0ee6-460b-9016-3fa5c19a56a7","type":"Grid"},{"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"},{"id":"f17257ba-4f75-42c7-893b-a4cf0036740b","type":"GlyphRenderer"}],"title":{"id":"af901232-8aa2-488c-932c-c8e5dda2750d","type":"Title"},"toolbar":{"id":"e29112ae-02d0-4dc6-9788-c3bcd084c560","type":"Toolbar"},"x_range":{"id":"98a9bfe3-e787-4432-af9d-0f3f9f086166","type":"DataRange1d"},"x_scale":{"id":"86e986bf-1069-41b3-b75c-db7e68d1b161","type":"LinearScale"},"y_range":{"id":"d9d21cdf-f19b-4f95-98ba-ef43d9aec5a7","type":"DataRange1d"},"y_scale":{"id":"9e7303e6-a33a-4cfd-8a41-23f8c9b4fe8f","type":"LinearScale"}},"id":"2da75283-6f20-4600-884a-98e59b066e28","subtype":"Figure","type":"Plot"},{"attributes":{"overlay":{"id":"56b62953-67f6-43e5-8665-1ae0b33a3587","type":"BoxAnnotation"}},"id":"5e93a11e-972b-4ea4-9ebd-e030a0a92bf5","type":"BoxZoomTool"},{"attributes":{"plot":null,"text":""},"id":"af901232-8aa2-488c-932c-c8e5dda2750d","type":"Title"},{"attributes":{"fill_color":{"value":"#1f77b4"},"line_color":{"value":"#1f77b4"},"x":{"field":"x"},"y":{"field":"y"}},"id":"cda92757-3dcd-42cb-95b9-392e57684258","type":"Triangle"},{"attributes":{"source":{"id":"21c90c7e-c156-400b-ba70-8b67b31b460c","type":"ColumnDataSource"}},"id":"64bb6a0d-f877-4657-9ade-525ec88605a9","type":"CDSView"},{"attributes":{},"id":"f2264866-9fec-45b0-b242-5111fcc1c4fb","type":"BasicTickFormatter"}],"root_ids":["635f8152-f2d6-4568-ae68-2973f310eaf8","2da75283-6f20-4600-884a-98e59b066e28","4da3e749-cdb4-48ed-8dc6-b78818d8f587"]},"title":"Bokeh Application","version":"0.13.0"}}
</script>
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
var docs_json = document.getElementById('41bd10a1-5a61-4504-80f1-8c56f40e644b').textContent;
var render_items = [{"docid":"c99a857f-320f-48ba-8576-3ef2bd47c6ce","roots":{"4da3e749-cdb4-48ed-8dc6-b78818d8f587":"d48bbd43-55c8-4727-befa-468754bdb0b5"}}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
var attempts = 0;
var timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
embed_document(root);
clearInterval(timer);
}
attempts++;
if (attempts > 100) {
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
clearInterval(timer);
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</body>
</html>
Yes that will happen but is easy to resolve : right click the (output html file) in working folder ---> hover over open with----> choose default program---> click on always open with (google chrome) Now the next time you run your code plot will open up in chrome instead of .html file in notepad
Office 365 outlook appointment addin does not start
We are encountering problems when trying to load our outlook appointment addin. Our command shows up in the ribbon ui and the addin is trying to start and we can trace the calls to our wev-app. We are not getting any errors, 404 or 500 in the tracing and the service responds with our first html-page containing a text and a button to initiate our authentication.
But after the html is returned outlook just stops the spinner for the addin and nothing is showed. Is there any good ways to debug this to understand what is happening?
The html-page is very simple and only contains the code below.
<head>
<title>Office-bokning</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<!--[authentication-popup-script]-->
<script>
startCheck = function () {
var checkCode = setInterval(function () {
localStorage.setItem('dummy', "dummy");
localStorage.removeItem('dummy');
var code = localStorage.getItem('code');
var externalProviderUserId = localStorage.getItem('externalProviderUserId');
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
var fallbackCode;
var fallbackExternalProviderUserId;
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
fallbackCode = readCookie('NAME_OF_COOKIE');
fallbackExternalProviderUserId = readCookie('externalProviderUserId');
}
console.log("code " + code);
if (code || fallbackCode) {
clearInterval(checkCode);
var http = new XMLHttpRequest();
var url = [URL]
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "text/plain");
//var that = this;
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
localStorage.removeItem('code');
localStorage.removeItem('externalProviderUserId');
window.location.href = "[URL]";
//location.reload();
}
}
http.send(params);
}
}, 1000);
}
startCheck();
</script>
</head>
<body class="container-fluid" style="padding-left: 0px; padding-right: 0px; height: 100%">
<p>
Some text describing the addin...
</p>
<!--[popup-button]-->
<script>
Office.initialize = function (reason) {
console.log("authorize office init" + reason);
var butan = document.getElementById('loginButton');
if (butan)
butan.style.display = 'block';
}
function commandFunction(event) {
event.completed();
}
</script>
</body>
TL;DR : It seems you want to pop up a page for auth. Use the displayDialogAsync API to do that.
Looking at your code, I don't see anything wrong with it. Moreover, the behavior you described is actually correct according to the code you have.
I see that you have a function named "commandFunction" that takes in an "event" parameter. My guess is that you have an ExecuteFunction in your manifest that calls commandFunction.
So when a user clicks on your add-in's button in the ribbon ui of an appointment window, Outlook will load your html webpage, invoke "Office.initialize", show a default spinner for your app just above the "Subject" field of the appointment window, and then call "commandFunction". The only code inside this function is "event.completed", so Outlook calls that code, which basically ends the execution of your app, at which point Outlook removes the default spinner to signal completion. That's exactly what you are experiencing.
You have to run any relevant code inside "commandFunction" before calling "event.completed". So for example, you can add code that will add a notification message/infobar to the appointment before calling "event.completed". Sample code below:
function commandFunction(event)
{
Office.context.mailbox.item.notificationMessages.addAsync
(
"some_unique_id_such_as_a_guid",
{
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
persistent: false,
message: "hello world",
icon: "default_icon"
},
function (asyncResult)
{
// check asyncResult.status
// do something
event.completed(true);
}
);
}
It appears that you want to open an html window for the user to authenticate before proceeding with the execution of your app. In that case, you should use the "displayDialogAsync" API by calling it inside "commandFunction" before "event.completed". This will open an IE window that points to authentication page URL. Sample code below:
function commandFunction(event)
{
Office.context.ui.displayDialogAsync
(
"https://ur/to/auth/page",
{
width: 50,
height: 45,
requireHTTPS: true
},
function (asyncResult)
{
// check asyncResult.status
// do something
event.completed(true);
}
);
}
The documentation for the displayDialogAsync API is at: https://github.com/OfficeDev/office-js-docs/blob/master/reference/shared/officeui.md
For debugging, open IE, go to 'Internet Options' -> 'General tab' -> click on 'Settings' button to open the 'Website Data Settings' window. In the 'Temporary Internet Files' tab, under 'Check for newer versions of stored pages', select 'Every time I visit the webpage'. Click Ok.
Now go to 'Advanced' tab -> 'Settings' section and uncheck the following:
Disable script debugging (Internet Explorer)
Disable script debugging (Other)
Then check the following:
Display a notification about every script error
Then add "debugger;" as the first line in "commandFunction":
function commandFunction(event)
{
debugger;
// add other code below...
}
This will prompt you to debug your code when you run the app. And you can debug in Visual Studio and go through your code if you have any other issues.
The HTML you pasted doesn't have a reference to Office.js: <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
how can i fire up contentscript
i got a simple question
i have these3 files
popup.html :
<script>
function buttonClicked(button)
{
chrome.extension.sendRequest({command:button.id});
}
</script>
<input style="width:100%" type="button" value="Click me" id="click" onclick="buttonClicked(this)"/><br/>
background.html :
<script>
function processRequest(request, sender, sendResponse)
{
alert('hi');
sendResponse({});
}
chrome.extension.onRequest.addListener(processRequest);
</script>
and contentscript.js
s = document.getElementsByClassName('st');
if (s[0].innerText != '') {
st = new Array();
for (i = 0;i<s.length;i++) {
st[i] = s[i].innerText;
}
chrome.extension.sendMessage({"message" : st}, function(response) {});
}
i would like to fire up the contentscript each time i click on the button in the popup page be cause somehow the script in the contentscript dosnt work neither or background.html nor on popup.html?
thank you
I've attempted to explain the solution and why to use it in the comments, three times. Since you don't understand it, I'll explain it again with references to your code:
Popup
Move the inline script to an external file, say popup.js.
Delete the inline event listener, and also move it to popup.js.
popup.js
function buttonClicked(button) {
chrome.extension.sendRequest({command: button.id});
}
document.getElementById('click').addEventListener('click', function() {
buttonClicked(this);
});
popup.html
<script src="popup.js"></script>
<input style="width:100%" type="button" value="Click me" id="click"><br>
If you test the previous code, you'll notice that it does not work. That's because the contents of popup.js is executed before the button (which occurs after the <script src> is created. This can be solved in two ways (use either method, but not both):
Recommended: Place <script src="popup.js"></script> before the closing </body> tag in popup.html. Then, you're certain that all elements do exist when the script is executed.
Alternative: Wrap the event listener call in a DOMContentLoaded event:
document.addEventListener('DOMContentLoaded', function() {
document.getElementByUd('click').addEventListener( ... );
});
Background page.
For a more thorough explanation on the available options, see the middle of this answer.
Modify the manifest file, use "background": {"scripts": ["background.js"]}.
Rename background.html to background.js, and remove <script> and </script> from the file.