Chrome 扩展与来自脚本 SRC 的网站数据表交互

Question

我正在尝试升级我的 chrome 扩展以将网站的数据 Table 长度更改为 200 而不是 50。

该网站的源代码中没有 table，它从 'jquery.dataTables.min.js' 文件中撤回了它，这就是我认为我无法触发值更改的原因。

Chrome 扩展的清单：

"name": "Extension",
  "version": "1.4",
  "manifest_version": 2,
  "options_page": "options.html",
  "description": "Extension",
  "permissions": [
    "<all_urls>", "tabs", "activeTab", "storage"
  ],
  "web_accessible_resources": ["insertChange.js"],
  "background": {
  "matches": [ "*://*.website.com/Index/*" ],
  "scripts" : [ "thirdParty/jquery.js", "event.js" ],
  "persistent": false
  },
    "browser_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
        "matches": [ "*://*.website.com/search/*" ],
        "css": [ "CopyPaste.css" ],
        "js": [ "thirdParty/jquery.js", "arrive.js", "loadInsertChange.js" ],
        "run_at": "document_end"
    }
  ]
}

event.js文件用于打开一些网站。com/search页面，具有所需select元素的页面，以及运行webScript.js 对于它打开的每个选项卡，单击扩展程序的图标：

event.js:

chrome.browserAction.onClicked.addListener(openWeb);
searchOnLoad = true;

function openWeb(url) {
    if (searchOnLoad) {
        chrome.tabs.create({url, active: false}, runSearch);
    } else {
        chrome.tabs.create({url, active: false});
    }
}
function runSearch(tab) {
    chrome.tabs.executeScript(tab.id, {file: 'search.js'});
}

加载数据后网站的 DOM table:

<div class="dataTables_length" id="datatable-responsive_length">
    <label>Show 
        <select name="datatable-responsive_length" aria-controls="datatable-responsive" class="">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
     entries</label>
</div>

也许到目前为止我在这些文件中打错了，因为它们是经过编辑的，而不是完整的文件，但请相信我到目前为止它是有效的。现在 'search.js' 在每个打开的 'website.com/search/' 页面（其中有 select 框）上的运行具有以下代码：

search.js:

$(document).arrive('#datatable-responsive_previous.paginate_button.previous', function() {

    //Add more select options, works good
    select = $('#datatable-responsive_length select');
    select.append('<option value="200">200</option>');
    select.append('<option value="300">300</option>');
    select.append('<option value="500">500</option>');

    //Change select HERE
});

每次我尝试更改值并触发值后面的事件（我试图将值更改为'200'以将数据table的长度增加到'200'），它不工作。我能够设置值，并触发我绑定到 jquery 上的元素更改的任何更改函数，但数据 table 的长度不会更改。我尝试过的事情：

//Settings the append of 200 to selected, and trigger change:
    select.append('<option value="200" selected>200</option>');
    select.change();

//Applying .val() and change:
    select.val(200).change()
    OR
    select.val(200);
    select.change();

//Tried trigger('change'):
    select.val(200).trigger('change');

//Tried declaring the change function:
    select.change(function() {
        alert('Changed');
    });
    select.val(200).change();
    ** This one triggers the alert, which means the change does work, but it's not applying the data table length change.

//Tried adding the dataTable plugin to my contect scripts, but it creates a new data table on the web page and interacting with it.
  I can't use any dataTable function without adding the plugin, and I've tried declaring the pagesLength on data table options,
  and using .page.len() function but I had no luck.

//Tried some solutions on web that includes creating an event to trigger the select

所有这些解决方案在该网页内使用 chrome 控制台时都有效，但在尝试通过扩展程序执行时无效。我只能更改值，并触发我所做的更改功能，但不能与现有数据 table 功能进行交互。我认为问题只是网站从具有外部 SRC 属性的脚本标签加载数据 table，并且我必须将我的扩展程序与网站的功能连接起来，因为它在通过 chrome的控制台。

如有帮助，我们将不胜感激！我一直在尝试我在网上找到的任何解决方案。找不到如何使 chrome 扩展与网站功能交互（我确实找到了相反的方法）。

EDIT1：所以我添加了两个新文件，包含该函数的 insertChange，并添加到网络可访问资源中：

function selectChange(element, len) {
    element.val(len).change();
    console.log('changed!');
}

和 loadInsertChange.js 我已添加到页面的内容脚本中：

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('insertChange.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

清单也相应更改（在顶部更新）

Answer 1

终于通过添加事件处理程序解决了这个问题。首先，创建了 2 个新文件 - insertChange.js 和 loadInsertChange.js。

insertChange.js:

document.addEventListener('selectChange', function (e){
    var data=e.detail;
    console.log("received "+data);
    $('#datatable-responsive_length select').val(data).change();
    //^^ This is my 'select' element. The data is the value I'm going to pass
});

还在清单中将 insertChange.js 添加到 web_accessible_resources。

loadInsertChange.js，内容脚本，将 insertChange 添加到 DOM:

var s = document.createElement('script');
s.src = chrome.extension.getURL('insertChange.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);
console.log('Load Insert Change Loaded');

而在我的 search.js 中，我刚刚触发了插入网站 DOM:

的 insertChange 中的事件

var data= '200'; //My required value to the select element
var evt=document.createEvent("CustomEvent");
evt.initCustomEvent("selectChange", true, true, data);
document.dispatchEvent(evt);

Chrome 扩展与来自脚本 SRC 的网站数据表交互

Chrome extension interact with website's dataTable from script SRC

jquery

onchange

datatables

google-chrome-extension

datatables-1.10