I am trying to build a chrome extension. It takes the username's background picture url and puts it to the page. But it gives unexpected error. The error text is:
The page at ran insecure content from .json?screen_name=jack&callback=jQuery18207089675806928426_1351333462593&_=1351333462594.
Uncaught ReferenceError: jQuery18207089675806928426_1351333462593 is not defined (anonymous function)
The extension folder contains these files:
action.js // background.html // jquery.min.js // manifest.json
action.js:
var userPage = document.URL;
var arr = userPage.split("/");
var username = "";
for(i=3;i<4;i++)
username += arr[i];
var page = ".json?screen_name="+username+"&callback=?";
background();
function background() {
$.getJSON(page, function(data) {
$("span.screen-name").append(" • <a href='"+data.profile_background_image_url+"'>B</a> • ");
});
}
background.html:
<html>
<head>
<script type="text/javascript" src="/javas.js"></script>
</head>
<body>
</body>
</html>
jquery.min.js is taken from .8.2.min.js
manifest.json:
{
"name": "Twitter Background",
"version": "1.0",
"background_page": "background.html",
"description": "Puts the background image url to the profile page.",
"content_scripts": [
{
"matches": ["/*","/*"],
"js": ["jquery.min.js","action.js"],
"all_frames":true
}
]
}
I am trying to build a chrome extension. It takes the username's background picture url and puts it to the page. But it gives unexpected error. The error text is:
The page at https://twitter./jack ran insecure content from http://api.twitter./1/users/show.json?screen_name=jack&callback=jQuery18207089675806928426_1351333462593&_=1351333462594.
Uncaught ReferenceError: jQuery18207089675806928426_1351333462593 is not defined (anonymous function)
The extension folder contains these files:
action.js // background.html // jquery.min.js // manifest.json
action.js:
var userPage = document.URL;
var arr = userPage.split("/");
var username = "";
for(i=3;i<4;i++)
username += arr[i];
var page = "http://api.twitter./1/users/show.json?screen_name="+username+"&callback=?";
background();
function background() {
$.getJSON(page, function(data) {
$("span.screen-name").append(" • <a href='"+data.profile_background_image_url+"'>B</a> • ");
});
}
background.html:
<html>
<head>
<script type="text/javascript" src="/javas.js"></script>
</head>
<body>
</body>
</html>
jquery.min.js is taken from http://code.jquery./jquery-1.8.2.min.js
manifest.json:
{
"name": "Twitter Background",
"version": "1.0",
"background_page": "background.html",
"description": "Puts the background image url to the profile page.",
"content_scripts": [
{
"matches": ["http://twitter./*","https://twitter./*"],
"js": ["jquery.min.js","action.js"],
"all_frames":true
}
]
}
1 Answer
Reset to default 4The first error ("The page at https:... ran insecure content from http://...") is just a warning, and non-critical.
The second error is caused by the difference in execution context. See Chrome extension code vs Content scripts vs Injected scripts. As you can see by looking at the first warning, a JSONP request is made. This means that a <script> element is injected in the page. This script calls a function (jQuery182....), which cannot be found, because jQuery was loaded in the context of a content script.
To solve the problem, either inject action.js in the page, or (remended) add https://api.twitter./* to the permissions section of your manifest file, and don't use ?callback=? in the URL you're passing to $.getJSON.