So on the website, the PayPal checkout page is implemented by using this iframe documentation, where it offers the customization on css of iframe with given css key:value pairs in JSON string. you can see that here
Now, can someone help me if I am passing the JSON string correctly, because it doesnt work for some reason. i need to make the labels white in color
<script type="application/javascript">
var styles = {
"pppLabel": {
"color": "#fff"
},
"pppCheckboxLabel": {
"color": "#fff"
}
};
var ppp = PAYPAL.apps.PPP({
"approvalUrl": "<?=$approvalUrl?>",
"placeholder": "ppplusDiv",
"payerEmail": "<?=$_POST['email']?>",
"payerFirstName": "<?=$_POST['name']?>",
"payerLastName": "<?=$_POST['surnamename']?>",
"payerPhone": "<?=$_POST['telephone']?>",
"payerTaxId": "<?=$_POST['cpf']?>",
"miniBrowser":false,
"merchantInstallmentSelection":12,
"merchantInstallmentSelectionOptional":true,
"mode": "live",
"payerTaxIdType": "BR_CPF",
"language": "pt_BR",
"country": "BR",
"css": styles,
});
I have made changes like
"css": JSON.stringify(styles)
but it doesnt work and give this in console
screenshot
code pic
web page pic
doesn't work and show some messages in console, i am adding a screenshot as an answer to my question screenshot
Related
So I am trying to make an extension for google where on google.com and google.com/search etc the background changes right and I got it working for google.com but not /search:
This is the manifest.json file:
{
"manifest_version": 3,
"name": "Simple Google Backgrounds",
"version": "1.0",
"description": "A simple Extension that makes it so you can change your google background to one of our themes. It only will work on google.com websites",
"icons": {
"16": "/icons/icon1.png",
"48": "/icons/icon2.png",
"128": "/icons/icon3.png"
},
"author": "Stephan Teig",
"content_scripts": [
{
"matches":["https://www.google.com/*"],
"css": ["main.css"]
}
]
}
And this is the main.css script
html body {
background: url(https://wallpaperaccess.com/full/1554103.jpg);
}
I tried to make an extenion and expected the /* to work
I found a solution, first, I added google.com/search as one website on the .json file and then I made my chrome light mode and it works but it does not look good... because it doesn't change the header that google has. but it technically works now.
I'm trying to simulate the clicking of CSS elements on my page and automatically take screenshots of the window at each stage for testing purposes. I'm using backstopJS as the CSS testing/screenshot framework. Everything seems to work fine for this first element. A modal is triggered when i click on the register link in the main header menu. but it is not generating any reference screenshotof the modal.
plz help to trigger a reference screenshot of the modal in the below given script
This is the script :
{
"viewports": [
{
"name": "desktop",
"width": 1600,
"height": 900
},
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"grabConfigs" : [
{
"testName":"vawizard"
,"url":"http://localhost/vawizard/index.html"
,"hideSelectors": [
]
,"removeSelectors": [
"header.banner--clone"
]
,"selectors":[
"#outer_wrapper header"
,".banner_box"
,".help_desk"
,".big_search_box"
,".look_specific"
,".smart_tool_box"
,"footer"
,".copyright_box"
]
}
]
}
This is the link
http://wizard.hodgesdigital.com/
Any ideas what could be causing this behavior?
BackstopJS is mainly focused on testing layout states at different screen sizes and doesn't support the testing of user interactions.
In your case I can make two recommendations. 1) You could add a state to your URL which triggers the modal when your page is loaded OR 2) you could write a custom CasperJS script to test cases like this which require some user interaction. More detail below...
Approach 1:
In the first case you could add a hash to your URL which would trigger your modal, In my experience it's common for web apps (e.g. Angular and Ember) to represent modal states in this way....
// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",
// then as part of a jQuery script
$(document).ready(function(){
if ( /openModal/.test(location.hash) )
{
// Do your open modal action here
// Then trigger BackstopJS
}
});
Approach 2:
If the above is not your style there is another good option. As part of the BackstopJS install you also have a full version of CasperJS -- so I would recommend going to CasperJS.org to look at some basic examples and see if it makes sense to write your own scripts. It will be a little more time consuming in the short run but the project specific boilerplate you write now may be nice to have for future edge cases (for testing forms, other interactions etc.).
We use custom scripts for such things. e.g
module.exports = async(page, scenario, vp) => {
await require('./onReadyInfo')(page, scenario, vp);
await require('./clickAndHoverHelper')(page, scenario, vp);
await require('./onReadyWaitForImages')(page, scenario, vp);
await page.waitForSelector("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.click("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.waitForSelector(
"#checkbox-twitter", {
timeout: 6000
}
);
await page.waitForTimeout(500);
await page.evaluate(async() => {
jQuery("#checkbox-twitter + label").click();
setTimeout(() => {
jQuery('#checkbox-twitter + label').focus()
}, 500);
});
await new Promise(resolve => setTimeout(resolve, 300));
};
This will open a dialog on link click, check a checkbox and give the label focus.
If I were to change user/site dashboard preset(s), is it possible to effect the change(s) to already created users in alfresco?
See this Share webscript : /components/dashboard/customise-dashboard
I use this script a long time ago, so I don't remind very well the parameters needed... but there is a property in the object parameter you must avoid...
EDIT : execute script /components/dashboard/customise-dashboard with POST method
Here an example of the request body :
{
"dashboardPage": "site/site1/dashboard",
"templateId": "dashboard-2-columns-wide-right",
"dashlets": [
{
"url": "/components/dashlets/site-links",
"regionId": "component-1-1",
"originalRegionId": "component-1-1"
},
{
"url": "/components/dashlets/calendar",
"regionId": "component-1-2",
"originalRegionId": "component-1-2"
},
{
"url": "/components/dashlets/wiki",
"regionId": "component-1-3",
"originalRegionId": "component-2-3"
},
{
"url": "/components/dashlets/docsummary",
"regionId": "component-2-1",
"originalRegionId": "component-2-1"
},
{
"url": "/components/dashlets/activityfeed",
"regionId": "component-2-2",
"originalRegionId": "component-2-2"
}
]
}
This I have only tried out in 4.2.c.
I navigated to the surf-config/components directory in the explorer (Very well hidden so use the left explorer pane) and manually deleted the xml configs for users. (Or run a javascript script from javascript console which does the same thing), afterwards I used the surf console tool to refresh all components and it worked.
I am creating a simple Chrome extension that blocks the "Google" logo image on the Google homepage using a content script. I followed the directions on the content-script page, but it still does not seem to be working. Can anyone spot what I'm doing wrong?
EDIT: I have tested it with other website like flickr.com and it works perfectly. I've also searched through the Google homepage CSS and cannot figure out which CSS rule is overriding my CSS. Any ideas? How can I make a stronger CSS injection so that no other CSS can override mine?
manifest.json:
{
"manifest_version": 2,
"name": "Google Logo Blocker",
"description": "This extension blocks the Google logo image.",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://www.google.com/"],
"css": ["blocker.css"]
}
],
"browser_action": {
"default_icon": "icon.png"
}
}
blocker.css:
img {
display: none !important;
}
Your code works for me. You are using straight USA Google, not an international version, right?
Just in case, change your matches to:
"matches": ["http://*.google.com/", "https://*.google.com/"],
And target the logo more directly. This will work in most cases:
#hplogo {
display: none !important;
}
For full-on, international Google support, change the content_scripts portion of your manifest to:
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"include_globs": ["http://*.google.*/*", "https://*.google.*/*"],
"css": ["blocker.css"]
} ],
Optionally also using exclude_matches and/or exclude_globs as desired.
If it still doesn't work, state the usual:
Exact URL
Chrome version
OS
Other extensions active
It is <img> tag in modern version and is a <div> tag with background image for international version. Regardless, of the differences they bear same id = hplogo, so this can work for you.
Click for Larger Image
Use
#hplogo{
display:none !important;
}
it will remove google Logo.
i want to make a chrome extension on google reader and i found a problem. content script can not access to iframes. For all n, window.frames[n] = undefined. And i have this "all_frames": true in manifest.json. Or someone could tell me how to add a button under each article. Thank you!
From taking a quick look at Google Reader's rendered HTML, the only button that is in an IFRAME appears to be the Google Plus +1 button - all the other buttons are not in an IFRAME. So you don't need to worry about the IFRAME.
I'm assuming that the existing buttons are the buttons that appear underneath each article: +1, Share, Email, Keep Unread, Add Tags.
If you want to add a new button to the existing article buttons all you need to do is enumerate the DOM - specifically the "entry-actions" DIV classes and append say a new SPAN with your element/button to each article.
I suspect (but not sure) that Reader may dynamically update the DOM with new articles. If this is the case you may need to track new articles being added to the DOM so you can add your button again. To do this add an event listener for DOMNodeInserted - e.g.
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
UPDATE:
The reason you can't see ".entry-actions" class is because it is added dynamically.
Here is a working very basic example. This will monitor the DOM and when it sees an entry-actions DIV that doesn't have our ".myclass" SPAN button, will add it.
You need to have jquery included in your extension for this to work. I've used jquery-1.7.1.min.js in this example. You will also need an icon file called foo.png too if you cut and paste the example.
manifest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension" // optional; shown in tooltip
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-1.7.1.min.js", "content_script.js" ],
"run_at": "document_idle"
}
]
}
content_script.js
var timer;
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
function onNodeInserted(e)
{
if(timer) clearTimeout(timer);
timer = setTimeout("addButtons()", 250);
}
function addButtons()
{
console.log('add buttons');
var $actions = $(".entry-actions").filter(function() {
return $(this).find('.myclass').length === 0;
});
$actions.append('<span class="myclass">My button</span>');
}