Используйте jScrollPane в расширении Chrome из скрипта содержимого - PullRequest
Новая
       2

Используйте jScrollPane в расширении Chrome из скрипта содержимого

0 голосов
/ 31 августа 2011

Я пишу расширение для Chrome - используя скрипт содержимого.

По сути, я вставляю div внутри DOM другой веб-страницы и вставляю в нее пользовательский контент. Необходимо сделать эту прокрутку div, и я пытаюсь сделать полосы прокрутки лучше, чем по умолчанию.

После вставки div запустите следующий код для добавления jScrollPane. 

$('#someFrame').contents().find('[class="my-scroll-pane"]').jScrollPane();

someFrame - это ID из iframe, уже существующего на веб-странице, и my-scroll-pane - это класс CSS, который я применил к div, который я вставил в iframe.

В файле manifest.json я включил следующее: 

"css": ["css/jscrollpane.css"],
"js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]

не сработало. Также не было выброшено ни одной ошибки JavaScript. Я сомневался, что проблема не в том, что CSS не является частью DOM главной страницы. Итак, попробовал следующий взлом в скрипте контента. 

$('#someFrame').contents().find('head').append("<link id='my_css_jscrollpane' href='" + chrome.extension.getURL("css/jscrollpane.css") + "' type='text/css' rel='stylesheet' />");

Не сработало. Опять без ошибок. Я подтвердил, что тег ссылки был правильно вставлен в раздел заголовка. Пожалуйста, руководство о том, как правильно сделать это.

1 Ответ

0 голосов
/ 31 августа 2011

Отвечая на ваш последний комментарий:

Это не сработало, потому что вы все еще делаете все с родительской страницы. Вам нужно внедрить все ваши скрипты контента в iframe и делать все внутри iframe, а не с родительской страницы.

Вы не можете получить доступ к iframe js с родительской страницы, поэтому, когда вы вызываете .jScrollPane() на родительской странице, она все еще ссылается на библиотеку родительской страницы, даже если вы внедряете ее как в parent, так и в iframe.

UPDATE

manifest.json 

"content_scripts": [
    {
      "matches": ["http://iframe.domain.com/*"],
      "css": ["css/jscrollpane.css"],
      "js": [ "plugins/jquery.min.js", "plugins/jquery.mousewheel.js", "plugins/jquery.jscrollpane.js", "js/my_script.js" ]
    }
  ],

my_script.js 

$(".my-scroll-pane").jScrollPane();
...