I have a .html which contains:
<article class="<article ">
<div class="post">
<p>
<span class="class22">
<span class="class33">
<a class="class44" href="/whatever">TextToColor</a>
</span>
</span>
</p>
</div>
My manifest.json looks like:
{
"manifest_version": 2,
"name": "Opera Extension",
"description": "description",
"version": "1.0"
, "background": {
"scripts": ["background.js"]
}
, "permissions": [
"tabs", "activeTab", "*://*/*", "http://*/*", "https://*/*", "file:///*/*"
]
, "web_accessible_resources": [
"fix.css"
]
, "content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"],
"all_frames": true
}]
}
Content.js
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'getNames') {
var shouldBeColored = [];
var arrayWithNames = document.getElementsByClassName("class44");
for(var i=0; i<arrayWithNames.length; i++) {
shouldBeColored[i] = arrayWithNames[i].innerHTML;
if(shouldBeColored[i] == 'TextToColor') {
div = document.createElement( 'div' );
div.textContent = 'Upper text Should be red';
div.style['background-color'] = 'red';
arrayWithNames[i].appendChild( div );
}
}
sendResponse(shouldBeColored);
return true;
}
});
and finally background.js:
chrome.tabs.onUpdated.addListener(
function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.sendMessage(tab.id, {text: 'getNames'}, gotNames);
}
})
function gotNames(arrayOfNames) {
var shouldBeColored = ['TextToColor', 'TextToColor2'];
if(arrayOfNames){
for(var i=0; i<arrayOfNames.length; i++) {
if(shouldBeColored.includes(arrayOfNames[i])) {
alert(arrayOfNames[i]);
}
}
}}
Currently what I'm able to do it to show an alert with the names found in the page and which I'm trying to set a color to. My question is: How to set a specific color, visually visible on the screen to those elements.
Any manipulation is accepted including css/js injection, anything. I'm completly new to js and css and I'm sorry if something in the description doesn't make sense.
Related
I am inspired by Rolls Royce website and want to implement the same scroll snapping feature in mine as well, I did it with the HTML default scroll-snap-type which gives me expected behavior but creates two scrollbars, one for the container and another one for the body, which is not expected so I tried to go with the IntersectionObserver but it causes an issue, I can travel to only adjacent slide when directly jumping from 1st slide to 3rd slide.
Here is the code sandbox link: https://codesandbox.io/s/scrollsnap-forked-pre0c?file=/pages/index.vue
Here is the code that I am working
<template>
<main class="landing">
<nav class="scroller">
<ul class="scroller__list">
<li
class="scroller__item"
v-for="(slide, index) in slides"
:key="index"
#click.prevent="scroll(slide.id)"
>
<a
class="scroller__dot"
:href="'#' + slide.id"
#click.prevent="scroll(slide.id)"
></a>
</li>
</ul>
</nav>
<div class="slides-container">
<slide
class="slide"
v-for="(slide, index) in slides"
:key="index"
:img="slide.img"
:id="slide.id"
:format="slide.format"
:filter="slide.filter"
>{{ slide.content }}</slide
>
</div>
</main>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
data() {
return {
slides: [
{
img: "car-slide-1.png",
content: "hello world",
id: "car-slide-1",
filter: "color-burn",
},
{
img: "car-slide-2.png",
// promo-video.mp4
content: "Second Car",
id: "car-slide-2",
filter: "color-burn",
// format: "video",
},
{
img: "car-slide-3.png",
content: "Third slide",
id: "car-slide-3",
filter: "color-burn",
},
],
observer: null as any as IntersectionObserver,
options: {
threshold: [0.5],
root: process.browser
? document.getElementsByClassName("slides-container")[0]
: null,
} as IntersectionObserverInit,
};
},
methods: {
scroll(id: string, who: string | null = null) {
console.log("scrolling to ", id, who ? "by " + who : "");
document.getElementById(id)?.scrollIntoView({
behavior: "smooth",
block: "start",
});
},
},
mounted() {
let scrolling = false;
this.observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !scrolling) {
let top = entry.boundingClientRect.top;
scrolling = true;
window.scroll({ behavior: "smooth", top: window.pageYOffset + top });
}
scrolling = false;
});
}, this.options);
document
.querySelectorAll(".slide")
.forEach((slide) => this.observer.observe(slide));
},
});
</script>
I have declared <all_urls> permission inside my manifest.json file and I'm using the tabs.insertCSS() to inject some css code inside a page when needed. I'm facing the error Uncaught (in promise) Error: Missing host permission for the tab in firefox extension debugger, how I can fix?
{
"manifest_version": 2,
"name": "myExtension",
"description": "",
"default_locale": "en",
"permissions": [
"<all_urls>",
"tabs",
"activeTab",
"contextMenus",
"notifications",
"webRequest",
"webRequestBlocking"
],
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
}
}
background:
const checkRequest = (details) => {
console.log(details)
var blocked = ["https://www.example.com/", "https://www.example2.com/"]
var isBlocked = blocked.includes(details.url)
console.log(isBlocked)
return { cancel: isBlocked }
}
const redirectAfterBlock = (details) => {
console.log(details)
if( details.error == "NS_ERROR_ABORT" ){
browser.tabs.insertCSS({
file: browser.runtime.getURL('content-replace.css')
})
console.log("blocked")
}
}
browser.webRequest.onBeforeRequest.addListener(
checkRequest,
{
urls: ["<all_urls>"],
types: ["main_frame"]
},["blocking"])
browser.webRequest.onErrorOccurred.addListener(
redirectAfterBlock,
{
urls: ["<all_urls>"]
})
Looks like I fixed it by inserting my CSS in webRequest.onCompleted instead of onBeforeRequest:
browser.webRequest.onCompleted.addListener(
function (details) {
extensionApi.tabs
.insertCSS(
details.tabId,
{ file: "content.css" }
)
},
{ urls: ["<all_urls>"] }
);
Downside is there's a flash of unstyled page.
I am trying to implement the List template feature of Alexa skill kit. However, I am unable to return the response in an appropriate format.
I have implemented the feature using the official documentation. However, I am not getting how to return the response of list template to my custom intent
'ListTemplate':function(){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
"type":"Display.RenderTemplate",
"template":{
"type":"ListTemplate1",
"token":"ListTemplate",
"title":title,
"backButton":"VISIBLE",
"backgroundImage":{
"contentDescription":"backgroundImage",
"sources":[
{
"url":"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
"listItems":[{
"token":"item1",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"first item of list"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary Text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"Secondary text is here"
}
},
},
{
"token":"item2",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"second item"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"secondary text"
}
}
}
]
}};
var directives =[ template ];
//return build_speechlet_response(title,speechOutput,directives, SESSION_LIST);
// function
build_speechlet_response(title,speechOutput,directives,phase){
const response = {
"version": "1.0",
"response": {
"outputSpeech":{
"type":"PlainText",
"text":"what else would you like to see"
},
"card":{
'type':'Simple',
'title':title,
'content':speechOutput
},
"directives":directives,
"shouldEndSession":'False'
},
"sessionAttributes":{
"template":"list_"
}
};
// return response;
this.emit(':tell',response);
},
The response I should get must be a custom list. But I am not getting it
It looks like this issues is that response is an object. It should be something like this.emit(':tell', speechOutput) (where speechOutput is a string).
If you want to also send a card it's this.emit(':tellWithCard', speechOutput, cardTitle, cardContent, imageObj).
But, since you're trying to use a render template, it would be something like:
this.response.speak(speechOutput)
.cardRenderer(cardTitle, cardContent, cardImage)
.renderTemplate(template);
this.emit(':responseReady');
You can find more info here - https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/tree/1.x
I do notice you're using v1 of the SDK - I would really recommend using v2 as it's a lot more straight forward.
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs
Hope that helps.
I tried the following code yet the response was not rendered.
const DisplayListIntentHandler = {
canHandle(handlerInput){
return handlerInput.requestEnvelope.request.type === 'IntentRequest'
&& handlerInput.requestEnvelope.request.intent.name === 'DisplayList';
},
handle(handlerInput){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
type:'Display.RenderTemplate',
template:{
type:"ListTemplate1",
token:"ListTemplate",
title:'title',
backButton:"VISIBLE",
backgroundImage:{
contentDescription:"backgroundImage",
sources:[
{
url:"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
listItems:[{
token:"item1",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"first item of list"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary Text is here"
},
secondaryText:{
type:"PlainText",
text:"Secondary text is here"
}
},
},
{
token:"item2",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"second item"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary text is here"
},
secondaryText:{
type:"PlainText",
text:"secondary text"
}
}
}
]
}};
return handlerInput.responseBuilder
.addRenderTemplateDirective(template)
.getResponse();
}
};
I am attempting to pass values from a Suitelet to an HTML page that is being inserted into an INLINEHTML field in the Suitelet form. However, I am unsure of the best way to accomplish this. I am currently doing it in this manner, but I want to ensure that I am using a somewhat secure method ideally, as opposed to allowing for XSS vulnerabilities.
Suitelet INLINEHTML field:
var htmlForm = form.addField({
id: 'custpage_htmlform',
type: ui.FieldType.INLINEHTML,
label: 'HTMLFORM'
});
var fileObj = file.load({
id: 123
});
var htmlContent = fileObj.getContents();
htmlContent = htmlContent.replace("['REPLACETHIS']","['<input type=\"radio\" name=\"selectRow\" />','EXAMPLE','1234','1245','01/2021','<img src=\"https://imageurl.example" />'];");
htmlForm.defaultValue = htmlContent;
HTML example:
<table id="example" class="display" style="width:100%">
</table>
<br />
<script>
//Main Data Table
var exampleValues = new Array();
var exampleDetailArr = ['REPLACETHIS'];
exampleValues.push(exampleDetailArr);
window.$vars = {
exampleValues: exampleValues
}
$(document).ready(function() {
$('#example').DataTable( {
data: exampleValues,
"bJQueryUI": true,
columns: [
{ title: "Select" },
{ title: "Type" },
{ title: "Internal ID" },
{ title: "External ID "},
{ title: "Date" },
{ title: "Memo" },
],
"columnDefs": [
{
"targets": [ 3 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>
Here is a fiddle of Slick Carousel embedded in a Bootstrap thumbnail.
JSFiddle
How can I make the carousel only 200px tall and ensure that the images are scaled proportionally? I can't seem to get the carousel to fit inside a container who's height I dictate.
NOTE: Resize your browser after loading this fiddle! This works around a known bug where the plugin layout is not initializing on page load. This is not the issue I'm needing solved. Ignore this issue.
HTML
<div ng-app="slickExampleApp" class="background">
<div ng-controller="SlickCtrl">
<div class="inner-container row">
<div class="thumbnail col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div ng-repeat="result in results">
<slick-carousel
settings="slickConfig"
media="result.images">
</slick-carousel>
<div class="row">
<div class="caption">
<h4 class="heading">{{result.heading}}</h4>
<p class="body">{{result.body}}</p>
<p class="text-center">
Place Offer
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS
var app = angular.module('slickExampleApp', ['slick']);
app.controller('SlickCtrl', function ($scope) {
$scope.slickConfig = {
dots: true,
lazyLoad: 'progressive',
infinite: true,
speed: 100,
slidesToScroll: 1,
//adaptiveHeight: true,
//TODO: Track this bug to allow for variableWidth on next release: https://github.com/kenwheeler/slick/issues/790
variableWidth: true,
onInit: function () {
jQuery(window).resize();
console.log('slickcaroseal locded');
},
centerMode: true
};
$scope.results = [
{
"annotations": {
"latlong_source": "In Posting",
"proxy_ip": "107.191.98.50:22225",
"source_account": "rmk8g-4822965821#sale.craigslist.org",
"source_cat": "sss",
"source_continent": "USA",
"source_heading": "\" Kennedy Machinists 8 Drawer Roller Cabinet, Kennedy Combination Set",
"source_loc": "sfbay",
"source_map_google": "https://maps.google.com/maps/preview/#37.759300,-122.483600,16z",
"source_map_yahoo": "http://maps.yahoo.com/#mvt=m&lat=37.759300&lon=-122.483600&zoom=16",
"source_neighborhood": "inner sunset / UCSF",
"source_state": "California",
"source_subcat": "tla|tls",
"source_subloc": "sfc"
},
"body": "\n \" Kennedy Machinists 8 Drawer Roller Cabinet, and Kennedy Combination and Machinist Chest Set with keys\".\nVery good condition. Asking Whole set for $875 or Best Offer (REASONABLE!!!!!).\nPlease email with your contact phone number if you are interest and SERIOUS buyer. Thanks.\n ",
"category": "STOO",
"category_group": "SSSS",
"external_id": "4822965821",
"external_url": "http://sfbay.craigslist.org/sfc/tls/4822965821.html",
"heading": " Kennedy Machinists 8 Drawer Roller Cabinet, Kennedy Combination Set",
"images": [
{
"full": "http://images.craigslist.org/00707_cwYj2bMonC8_600x450.jpg"
},
{
"full": "http://images.craigslist.org/00w0w_8b36BjRL4YM_600x450.jpg"
},
{
"full": "http://images.craigslist.org/00U0U_6MKF9DWjRfM_600x450.jpg"
},
{
"full": "http://images.craigslist.org/00d0d_4bX1cj3aIrf_600x450.jpg"
},
{
"full": "http://images.craigslist.org/00B0B_8i444xC2DKt_600x450.jpg"
},
{
"full": "http://images.craigslist.org/00F0F_1CnjxJRlvXt_600x450.jpg"
}
],
"location": {
"accuracy": 8,
"city": "USA-SFO-SNF",
"country": "USA",
"county": "USA-CA-SAF",
"geolocation_status": 3,
"lat": "37.7593",
"locality": "USA-SFO-OUS",
"long": "-122.4836",
"metro": "USA-SFO",
"region": "USA-SFO-SAF",
"state": "USA-CA",
"zipcode": "USA-94122"
},
"price": 875,
"source": "CRAIG",
"timestamp": 1419808764
}
];
});
//Custom implementation of https://github.com/kbdaitch/angular-slick-carousel
//Var needed for slick carousel directives below.
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
app.directive('onFinishRender', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
return scope.$evalAsync(attr.onFinishRender);
}
}
};
});
app.directive('slickCarousel', [
'$timeout', '$templateCache', function($timeout, $templateCache) {
var SLICK_FUNCTION_WHITELIST, SLICK_OPTION_WHITELIST, isEmpty;
$templateCache.put('angular-slick-carousel/template.html', "<div class=\"multiple\" ng-repeat=\"m in media\" on-finish-render=\"init()\">\n <img ng-if=\"isImage({media: m})\" data-lazy=\"{{m.full || m.thumb || m.images}}\"/>\n <video ng-if=\"isVideo({media: m})\" ng-src=\"{{m.src}}\" type=\"{{m.mimeType}}\" ></video>\n</div>");
SLICK_OPTION_WHITELIST = ['accessiblity', 'autoplay', 'autoplaySpeed', 'arrows', 'cssEase', 'dots', 'draggable', 'fade', 'easing', 'infinite', 'lazyLoad', 'onBeforeChange', 'onAfterChange', 'pauseOnHover', 'responsive', 'slide', 'slidesToShow', 'slidesToScroll', 'speed', 'swipe', 'touchMove', 'touchThreshold', 'vertical'];
SLICK_FUNCTION_WHITELIST = ['slickGoTo', 'slickNext', 'slickPrev', 'slickPause', 'slickPlay', 'slickAdd', 'slickRemove', 'slickFilter', 'slickUnfilter', 'unslick'];
isEmpty = function(value) {
var key;
if (angular.isArray(value)) {
return value.length === 0;
} else if (angular.isObject(value)) {
for (key in value) {
if (value.hasOwnProperty(key)) {
return false;
}
}
}
return true;
};
return {
scope: {
settings: '=',
control: '=',
media: '=',
onDirectiveInit: '&',
isImage: '&',
isVideo: '&'
},
templateUrl: function(tElement, tAttrs) {
if (tAttrs.src) {
return tAttrs.src;
}
return 'angular-slick-carousel/template.html';
},
restrict: 'AE',
terminal: true,
link: function(scope, element, attr) {
var options;
if (typeof attr.isImage !== 'function') {
scope.isImage = function(params) {
//TODO: Should evaluate mimetype of image.. grrrr
//Here is original code
//return params.media.mimeType === 'image/png' || params.media.mimeType === 'image/jpeg';
return true;
};
}
if (typeof attr.isVideo !== 'function') {
scope.isVideo = function(params) {
return params.media.mimeType === 'video/mp4';
};
}
options = scope.settings || {};
angular.forEach(attr, function(value, key) {
if (__indexOf.call(SLICK_OPTION_WHITELIST, key) >= 0) {
return options[key] === scope.$eval(value);
}
});
scope.init = function() {
var slick;
slick = element.slick(options);
scope.internalControl = scope.control || {};
SLICK_FUNCTION_WHITELIST.forEach(function(value) {
scope.internalControl[value] = function() {
slick[value].apply(slick, arguments);
};
});
scope.onDirectiveInit();
};
}
};
}
]);
Answer:
CSS
.slick-slide {
height:200px;
}
.slick-slide img {
height:200px;
}
I was having to set the height eg .slick-carousel{width: 200px;} because adaptive height wasnt working and slick was making the carousel as tall as the imgs (before it was resized by css). but after messing around with it for a while. this is what works for me.
.slick-slide{
display: none;
float: left;
height: auto;
min-height: 1px;
img{
max-width: 100vw !important;
}
}
Try removing slidesToScroll from the config. The following simple combination worked for me without any additional CSS fudgery.
$('.slick-carousel').slick({
variableWidth: true,
centerMode: true
});
Set the container div's height to the desired height for example 60% and the slick's and the 2 following div's height to 100%.
EXAMPLE:
CSS:
.html {
height: 100%;
}
.slick-container {
height: 60%;
}
.slick-slider, .slick-list, .slick-track {
height: 100%;
}
JS:
$(document).ready(function(){
$('.slick-slider').slick();
});
I have faced the same problem more or less, using images in Slick is tricky. So when I had a webpage on desktop everything was very smooth. But on mobile the slide was to small. The suggestion with scale(2) did not work hence it would make the image bigger then te screen.
After going back and forward I decided, to crop the images to be more vertical instead of horizontal.
Then In Jquery I did:
if ($(window).width() < 820) {
$("#slide-1").prop("src", "/slide1-resp.png");
$("#slide-2").prop("src", "/slide2-resp.png");
$("#slide-3").prop("src", "/slide3-resp.png");
}
I hope this answer is relevant for those who came here with the same problem.
Apparently the issue with adaptive height it's a bug as the source code says:
https://github.com/kenwheeler/slick/issues/790