How do slideshow run when the "new tab" tab is open?

Asked

Viewed 103 times

3

I’m trying to make a slideshow script run every time a new tab opens in Google Chrome. I need to do the following execution:

1-Make a slideshow script run 10 images [here put only 3], fade, every time the user opens a new tab.

Problems:

1-The script is loaded, but the slideshow "does not happen";

2-Of the 10 images, only the last one is displayed [as in the standard "Theme"];

I’ve read the documentation, but I can’t find a solution;

I’ve used several plugins, but the result is the same.

Use the executeScript,but without success;

I’m using slidesjs.

Someone can give a help, ?

This is getting on my nerves!

html

<!DOCTYPE html>
<html lang="pt_BR">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>New Tabe</title>

  <!-- Bootstrap CSS -->
  <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->

  <!-- font awesome -->
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">-->

  <!-- custom style -->
  <link rel="stylesheet" href="assets/css/core.css">


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->

</head>

<body>
  <div class="bs-slide-show">

    <img src="http://lorempixel.com/1000/1000/sports" alt="" class="img-responsive">

    <img src="http://lorempixel.com/400/200/sports" alt="" class="img-responsive">

    <img src="http://lorempixel.com/400/200/sports" alt="" class="img-responsive">

  </div>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <!-- Bootstrap JavaScript -->
  <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
  <!-- jquery circle plugin-->
  <!--<script src="assets/js/lib/jquery.cycle.lite.js"></script>-->
  <script src="assets/js/lib/source/jquery.slides.min.js"></script>

</body>

core css.

.bs-slide-show {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
}

Newtab.js

 chrome.tabs.executeScript(
null,
{file: "main.js" }

);

main.js

$(function(){
$(".bs-slide-show").slidesjs({

    navigation:{
        active: false

    },
    pagination:{
        active: false,
    },
    effect:{
        slide: {
            speed: 200
        },
        fade:{
            speed: 300,
            crossfade: true
        }
    }
});

});

manifest.json

{ 
"version": "2015.12.0.1", 
"name": "__MSG_NAME__",
"description": "__MSG_EXT_DESC__",
"default_locale": "en",
  
"permissions" : [
   "management",
   "tabs",
   "notifications"
],

"chrome_url_overrides" : {
    "newtab": "newtabe.html"
 },

 "options_page": "docs/options.html",
  
 "browser_action": {
   	"default_icon": {               
    	"19": "assets/img/icons/icon-19.png",          
    	"38": "assets/img/icons/icon-38.png"          
   },
   "default_title": "__MSG_DEFAUL_TITLE",
    "default_popup": "popup.html"        
 },

 "background": {
    "scripts": ["newtabe.js, main.js, jquery.js"],
    "persistent": false
 },   
  "manifest_version": 2
}

Obs: The images are loaded;

I managed to override the new guide by replacing it with my own;

The extension loads the files normally;

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.