chrome extension content script can not access to iframes - iframe

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>');
}

Related

paypal iframe custom style

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

Custom background for Chrome new tab replacement extension

I'm developing a new tab replacement extension for Google Chrome and I'd like to allow the user to customize the background, to do so I'm using the storage.sync API as suggested by this page.
The problem is that the style changes are applied asynchronously, so the default background (white) is briefly used during the page load resulting in unpleasing flashes.
Possible (unsatisfying) solutions are:
do not allow to change the background;
hard code a black background in the CSS (and move the problem to custom light backgrounds);
use a CSS transition (still super-ugly).
What could be an alternative approach?
Follows a minimal example.
manifest.json
{
"manifest_version": 2,
"name": "Dummy",
"version": "0.1.0",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"permissions": [
"storage"
]
}
newtab.html
<script src="/newtab.js"></script>
newtab.js
chrome.storage.sync.get({background: 'black'}, ({background}) => {
document.body.style.background = background;
});
I come up with a reasonable solution. Basically since the localStorage API is synchronous we can use it as a cache for storage.sync.
Something like this:
newtab.js
// use the value from cache
document.body.style.background = localStorage.getItem('background') || 'black';
// update the cache if the value changes from the outside (will be used the next time)
chrome.storage.sync.get({background: 'black'}, ({background}) => {
localStorage.setItem('background', background);
});
// this represents the user changing the option
function setBackground(background) {
// save to storage.sync
chrome.storage.sync.set({background}, () => {
// TODO handle error
// update the cache
localStorage.setItem('background', background);
});
}
This doesn't work 100% of the times but neither do the simple:
document.body.style.background = 'black';
So it's good enough.¹
¹ In the real extension I change the CSS variables directly and I obtain much better results than setting the element style.

Using browser_action to apply css styling

I am new to chrome extension development. I am writing a chrome extension that will inject CSS into the page. I've been successful in doing this by specifying the css file in manifest.json.
I now want to apply different css (files) depending on a link or button selected on a popup triggered through a browser_action. So clicking link 1 will apply style-red.css and clicking link 2 will apply style-blue.css. A third "reset" button should reset css back to its original state (removing the custom style red or blue css files).
My manifest.json is as follows:
{
"name": "Redesign",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": ["*://*.my-site.com/*"],
"js": ["jquery-3.1.0.min.js", "script.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "*://*.my-site.com/*"
]
}
My current approach is to have a listener in script.js listening for the button pressed in popup.html. Depending on the button pressed, the following script.js will add the corresponding CSS file into my-site.com using the jquery below:
$(document).ready(function() {
var path = chrome.extension.getURL('style-red.css');
$('head').append($('<link>')
.attr("rel","stylesheet")
.attr("type","text/css")
.attr("href", path));
});
I tried to use the above jquery in script.js (without the browser_action in the manifest.json) thinking script.js will get automatically loaded but the CSS does not get applied to my-site.com. What am I doing wrong or is there simpler Javascript without the need for a full jquery library to be added?
And even if the jquery works, how do I apply a different CSS file based on the choice in popup.html as well as reset the css back to its original styling upon user choice?
To insert css file in content scripts, you need to declare the css file as web_accessible_resources
To dynamically insert css files, see chrome.tabs.insertCSS, it can be called in extension context, such as popup page.

Firefox Extension - including CSS in manifest.json

My manifest is not working when I add CSS into it, while it works in Chrome Extension when I do like that.
Here how my manifest looks:
"css": ["css/jquery-ui.css", "css/font-awesome.css", "css/simplegrid.css", "css/basic.css"],
"js": ["jquery.js", "jquery-ui.js", "myPeaceFile.js"],
myPeaceFile.js works, jquery's are working. But CSS files are not.
I previously asked question about jquery's not working. It looked like this:
"js": ["peace.js", "jquery.js"] - didn't work.
Then I was suggested this and it worked:
"js": ["jquery.js", "peace.js"]
Is it something similar? Please help.
Thanks!
You can attach CSS to pages using Style, in your main.js define a style and attach this style to the contentscript.
var { Style } = require('sdk/stylesheet/style');
var style = Style({
uri: './bootstrap.css'
});
tabs.on('ready', function(tab) {
let worker = tab.attach({
contentScriptFile: [
data.url("jquery.min.js"),
data.url("jquery-ui/jquery-ui.min.js"),
data.url("mycontent-script.js"),
]
});
attach(style, tab);
});
At the Style constructor in the second line you can pass a string, or an array of strings, that represents local URI to stylesheet. In this case the ./bootstrap.css is in the data folder of the extension.

how to check bootstrap modal in CSS Regression Testing backstopjs

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.

Resources