Can i host google chrome extensions on my site - google-chrome-extension

I have created one Google chrome extension for my site. I need to be installed this extension automatically while I am running my webpage on browser.. I want to place the packed extension in my own site. is it's possible to host my extension in my own site. Please advice me how I can install that extension automatically while I am running my page and also how it is possible to host in my own server.
Thanks in advance..

You should use Inline Installation for users to easily install your app.
You can create a simple popup that redirect to the site with code as follows
<div id="p2r_addon_inst" class="myclass">
<div id="chrome_info" style="display: block; top: 0px;">
<div id="addon_install_icon"></div>
<span id="addon_install_message">Chrome extension is available for this site More info... </span>
<div id="addon_install_buttonblock">
<div id="addon_install_remove"></div>
<button id="addon_install_extinstallbutton">Install</button>
<button id="addon_install_dontaskagain">Don't ask again</button>
</div>
</div>
</div>
and the css is
.myclass{
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: visible;
z-index: 999;
}

Related

SendGrid anchor <a> tag is not working properly in Outlook

I used Sendgrid api for email template and in one of email has some confirmation functionality and for that I used an anchor tag which is redirecting to backend server and then backend api did all stuff. It is working fine, but some of outlook clients are complaining that they are not redirecting to the correct address.
I got the link from the client (outlook) which is something below:
https://owa.nexus.ox.ac.uk/owa/redir.aspx?SURL=u16WQnU.......
but above link is wrong and in sendgrid the link should be something like below:
https://u3550765.ct.sendgrid.net/wf/click?upn=hj8lklPLwDMw.......
Can anyone help me and suggest me either it is sendgrid issue in Outlook or it is something related to Outlook setting ?
Below is the email template:
<div style="width: 500px;margin: auto;margin-top: 37px;">
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;color: #fff;height: 40px;border: none;border-radius: 5px;line-height: 2.9;text-align: center;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
ACCEPT
</div>
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;height: 40px;border: none;border-radius: 5px;color:#ffffff;line-height: 2.9;text-align: center;padding: 0px;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
DECLINE
</div>
</div>
I suspect the issue is you're using Outlook specific HTML (VML) to generate buttons. SendGrid doesn't wrap those links, which is why that isn't working.
It would be helpful if you could post a sample of the HTML you sent. Then we could confirm if that's the issue.

Loading Bot using DirectLine in SharePoint - builder.prompts.choice button refresh issue

When loading my bot using BotChat.js directline connection to Bot Framework inside of a SharePoint page, any builder.prompts.choice options that contain builder.liststyle.button will cause a page refresh if a user clicks that option.
HTML Button returned from BotChat.js DirectLine channel
<button class="ac-pushButton" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto;">Test Button</button>
This appears to be down to the HTML button being returned to the user not having a type="button" attribute (see here).
How could I go about loading this attribute in to buttons that are displayed in the Bot Chat?

CSS images not displaying with AngularJS on Heroku

I am using Heroku - Yeoman - AngularJS Full-Stack - Bootstrap - NodeJS Stack.
Deployment on Heroku is built using 'Grunt build' command. When deployed to Heroku I am having problems rendering CSS images on web pages. Any images within the page are displayed but not from the CSS files.
Eg: the code below does not work
CSS
.aboutpage-header
{
height: 250px;
background: url('../images/slider-map.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 50px;
}
HTML:
<header class="aboutpage-header">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<h2 class="title">About Us</h2>
<h2 class="intro"><i class="fa fa-location-arrow"></i>Company<span class="highlight">IT</span>
are experts in bespoke software development and tailored consulting</h2>
</div>
</div>
</div>
</header>
locally it works fine when running Grunt serve but as soon as it's deployed on Heroku the CSS images are missing.
As suggested in the comments, the link should be:
/assets/images/image.jpg
instead of:
../assets/images/image.jpg

MEAN.js not showing in iframe

I have to display a MEAN.JS app within an iframe, so I started with a simple html file:
<iframe style="height: 100%; width: 100%;" src="http://localhost:3000/#!/workouts"></iframe>
But then the iframe content is empty, can please somebody help me?
Got it: My app is using Helmet (https://github.com/evilpacket/helmet) which setted a DENY in the X-Frame-Options. So, in my Express configuration I setted:
app.use(helmet.xframe('ALLOW-FROM', 'www.mydomain.com'));
And it worked

Linking to HTML files in chrome App

I would simply like have a link to a different page. But when I use:
<div style="position: absolute; top: 230px; width: 600px;
left: 250px; height: 120px">
<h2>
<a href='cgoogle.html'>
Sign in with your Google Account
</a>
</h2>
</div>
The link does nothing. I read that the solution is geturl, but I have no idea how to implement this. Does anyone have an example?
If what you want is open the link in the default browser (note that this may be not Chrome on the user's system), then add target="_blank" to your link:
<a href='cgoogle.html' target="_blank">
Sign in with your Google Account
</a>
However, it looks like what you're trying to do here is authenticate the user. The proper way to do that is to use the Chrome Identity API. You can read more on Chrome user authentication in general here (the API page also has this link).
If all that seems a little daunting, this app sample should get you off the ground.
Also note that "link does nothing" is not exactly true: it prints an error to the console, in addition mentioning the target="_blank" thingy. When you're developing Chrome apps, using the console is imperative (both the background page and foreground page ones) - it often provides very useful feedback on what's going on.

Resources